각진 세상에 둥근 춤을 추자
[JSP] JAVA JSON user 관리 프로그램 - 등록 본문
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
