각진 세상에 둥근 춤을 추자

[JSP] JAVA JSON user 관리 프로그램 - 등록 본문

JSP

[JSP] JAVA JSON user 관리 프로그램 - 등록

circle.j 2022. 10. 23. 14:51

 

 

2022.10.23 - [JSP] - [JSP] JAVA JSON user 관리 프로그램 - 리스트

 

[JSP] JAVA JSON user 관리 프로그램 - 리스트

Ajax를 이용해서 user 목록을 관리하는 프로그램을 구현해 본다. 데이터는 Sequel Pro에서 작성하여 불러온다. 1. Eclipse - user2 폴더 생성 - data 폴더, js폴더 생성 jsp파일과 js파일을 나누어 생성한다...

this-circle-jeong.tistory.com

 

리스트에 이어 user 등록 화면과 user 등록을 구현해 본다. 

 

1. register.js (데이터 요청)

/**
 * 
 */

function register(){
 
	$(function(){

		$('section').empty();
		$('nav').empty().append("<h4>user2 등록</h4><a href='#' id='userList'>user2 목록</a>");
		
		let table  = "<table border='1'>";
			table += "<tr>";
			table += "<td>아이디</td>";
			table += "<td><input type='text' name='uid'/></td>";
			table += "</tr>";
			table += "<tr>";
			table += "<td>이름</td>";
			table += "<td><input type='text' name='name'/></td>";
			table += "</tr>";
			table += "<tr>";
			table += "<td>휴대폰</td>";
			table += "<td><input type='text' name='hp'/></td>";
			table += "</tr>";
			table += "<tr>";
			table += "<td>나이</td>";
			table += "<td><input type='number' name='age'/></td>";
			table += "</tr>";
			table += "<tr>";
			table += "<td colspan='2' align='right'><input type='submit' id='btnRegister' value='등록'/></td>";
			table += "</tr>";
			table += "</table>";
		
		$('section').append(table);

	});

}

 

2. register.jsp (데이터베이스 연결)

<%@page import="com.google.gson.JsonObject"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="com.google.gson.Gson"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="bean.UserBean"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@page import="config.DBCP"%>
<%@ page contentType="application/json;charset=UTF-8" pageEncoding="UTF-8"%>
<%

	request.setCharacterEncoding("utf-8");
	String uid = request.getParameter("uid");
	String name = request.getParameter("name");
	String hp = request.getParameter("hp");
	String age = request.getParameter("age");
	
	

	int result = 0;

	
	try{
		Connection conn = DBCP.getConnection();
		PreparedStatement psmt = conn.prepareStatement("insert into `user2` values (?,?,?,?)");
		psmt.setString(1, uid);
		psmt.setString(2, name);
		psmt.setString(3, hp);
		psmt.setString(4, age);
		
		// 1이면 성공,0이면 실패(0: 중복 아이디)
		result = psmt.executeUpdate();
		
		psmt.close();
		conn.close();		
		
	}catch(Exception e){
		e.printStackTrace();
	}
	
	
	//String jsonData = "{\"result\":"+result+"}";
	JsonObject json = new JsonObject();
	json.addProperty("result", result);
	
	String jsonData = json.toString();
	
	out.print(jsonData);
%>

 

3. manager.jsp 

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>user2 manager</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
		<script src="./js/list.js"></script>
		<script src="./js/register.js"></script>
		<script>
			$(document).ready(function(){
				
				// user2 목록 불러오기
				list();
				
				// user2 목록 화면
				$(document).on('click', '#userList', function(e){
					e.preventDefault();
					list();
				});
				
				
				
				// user2 등록 화면
				$(document).on('click', '#userAdd', function(e){
					e.preventDefault();
					register();
				});
				
				// user2 등록하기
				$(document).on('click','#btnRegister',function(){
					
					// 데이터 가져오기
					let uid = $('input[name=uid]').val();
					let name = $('input[name=name]').val();
					let hp = $('input[name=hp]').val();
					let age = $('input[name=age]').val();
					
					// JSON 생성
					let jsonData = {
							"uid":uid,
							"name":name,
							"hp":hp,
							"age":age
					};
					
					console.log(jsonData);
					// 전송하기
					$.ajax({
						url:'./data/register.jsp',
						method: 'post',
						data: jsonData,
						dataType: 'json',
						success: function(data){
							
							if(data.result == 1){
								alert('입력 성공');
							}else{
								alert('입력 실패! 중복되는 아이디입니다.');
							}
							
						}
					});
					
				});
				
				
			});
		
		</script>
		
		
	</head>
	<body>
		<h3>user2 관리자</h3>
		
		<nav></nav>
		<section></section>
		
	</body>
</html>

 

 

 

 

저작자표시

'JSP' 카테고리의 다른 글

[JSP] Eclipse - Servlet2: Annotation URL 매핑  (0) 2022.10.23
[JSP] Eclipse - Servlet 1: 프로그램  (0) 2022.10.23
[JSP] JAVA JSON user 관리 프로그램 - 리스트  (0) 2022.10.23
[JSP] JAVA JSON  (0) 2022.10.23
[JSP] 프로젝트 실습 - 게시판 만들기 4 (회원가입 화면 설계)  (0) 2022.10.23
'JSP' Related Articles more