insertPerson.jsp
<%@ page language="java" contentType="text/plain; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ page import ="kr.util.DBUtil" %>
<%@ page import ="java.sql.Connection" %>
<%@ page import ="java.sql.PreparedStatement" %>
<%
//전송된 데이터 인코딩 타입 지정
request.setCharacterEncoding("utf-8");
//전소된 데이터 반환
String id = request.getParameter("id");
String name = request.getParameter("name");
String job = request.getParameter("job");
String address = request.getParameter("address");
String blood_type = request.getParameter("blood_type");
Connection conn = null;
PreparedStatement pstmt = null;
String sql = null;
try{
//Connection 객체 반환
conn = DBUtil.getConnection();
//SQL문 작성
sql = "INSERT INTO people (id,name,job,address,blood_type,reg_date)VALUES(?,?,?,?,?,SYSDATE)";
//JDBD 수행 3단계
pstmt = conn.prepareStatement(sql);
//? 데이터 바인딩
pstmt.setString(1,id);
pstmt.setString(2,name);
pstmt.setString(3,job);
pstmt.setString(4,address);
pstmt.setString(5,blood_type);
//JDBC 수행 4단계
pstmt.executeUpdate();
%>
{"result":"success"}
<%
}catch(Exception e){
%>
{"result":"failure"}
<%
e.printStackTrace();
}finally{
//자원정리
DBUtil.executeClose(null, pstmt, conn);
}
%>
content.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 목록</title>
<style type="text/css">
form{
width:500px;
margin:10px auto;
}
ul{
padding:0;
margin:0;
list-style:none;
}
ul li{
padding:0;
margin:0 0 10px 0;
}
label{
width:150px;
float:left;
}
table{
border:1px solid gray;
width:500px;
margin:0 auto;
border-collapse: collapse; /* 선이 두줄이 아닌 한줄만 나오도록 */
}
td{
border:1px solid gray;
padding:10px;
}
</style>
<script type="text/javascript" src="../js/jquery-3.7.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
//회원 목록
function selectList(){
$.ajax({
url:'getPeopleJSON.jsp',
dataType:'json',
success:function(param){
//table의 내부 내용물 제거(초기화)
$('#output').empty();
$(param).each(function(index,item){
let output = '';
output += '<tr>';
output += '<td>'+item.id+'</td>';
output += '<td>'+item.name+'</td>';
output += '<td>'+item.job+'</td>';
output += '<td>'+item.address+'</td>';
output += '<td>'+item.blood_type+'</td>';
output += '<td>'+item.reg_date+'</td>';
output += '</tr>';
$('#output').append(output);
});
},
error:function(){
alert('네트워크 오류 발생');
}
});
}
//회원 등록 이벤트 연결
$('#insert_form').submit(function(event){
//입력 양식의 내용을 요청 매게 변수 문자열로 만듬(파라미터네임과 value의 쌍, 인코딩 처리)
let input_data = $(this).serialize(); //시리얼라이즈는 폼데이터를 가져와서 URL 인코딩된 문자열로 반환한다.
//alert(input_data);
//서버와 통신
$.ajax({
url:'insertPerson.jsp',
type:'post',
data:input_data,
dataType:'json',
//성공했을 때
success:function(param){
if(param.result=='success'){//회원가입 성공
alert('회원 가입 완료');
//폼 초기화
$('#insert_form input[type="text"]').val(''); //타입이 텍스트 인것만 지운다.
//목록호출
selectList();
}else{//회원가입 실패
alert('회원 가입 오류 발생');
}
},
//실패했을 떄
error:function(){
alert('네트워크 오류 발생')
}
});
//기본 이벤트 제거
event.preventDefault();
});//end of submit
//초기화면에 데이터를 표시
selectList();
});
</script>
</head>
<body>
<form id="insert_form">
<fieldset>
<legend>회원 등록</legend>
<ul>
<li>
<label for="id">아이디</label>
<input type="text" name="id" id="id">
</li>
<li>
<label for="name">이름</label>
<input type="text" name="name" id="name">
</li>
<li>
<label for="job">직업</label>
<input type="text" name="job" id="job">
</li>
<li>
<label for="address">주소</label>
<input type="text" name="address" id="address">
</li>
<li>
<label for="blood_type">혈액형</label>
<input type="text" name="blood_type" id="blood_type">
</li>
<li>
<input type="submit" value="추가">
</li>
</ul>
</fieldset>
</form>
<table id="output"></table>
</body>
</html>
getPeopleJSON.jsp
<%@ page language="java" contentType="text/plain; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ page import ="kr.util.DBUtil" %>
<%@ page import ="java.sql.Connection" %>
<%@ page import ="java.sql.PreparedStatement" %>
<%@ page import = "java.sql.ResultSet" %>
[<%
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
String sql = null;
try{
//Connection 객체 반환
conn = DBUtil.getConnection();
//SQL문 작성
sql = "SELECT * FROM people ORDER BY reg_date DESC";
//JDBC 수행 3단계
pstmt = conn.prepareStatement(sql);
//JDBC 수행 4단계
rs = pstmt.executeQuery();
while(rs.next()){
String id = rs.getString("id");
String name = rs.getString("name");
String job = rs.getString("job");
String address = rs.getString("address");
String blood_type = rs.getString("blood_type");
String reg_date = rs.getString("reg_date"); //Date가 아닌 String으로하면 시분초까지 나옴.
//while이 돌고 if가 나오기 때문에 첫번째에는 쉼표가 들어가지않음
if(rs.getRow()>1) out.println(",");
%>
{
"id":"<%= id %>", <%-- 자바스크립트 에서는 <%= id %> 를 명시할 떄 ""를 해줘야 문자열로 인식한다. --%>
"name":"<%= name %>",
"job":"<%= job %>",
"address":"<%= address %>",
"blood_type":"<%= blood_type %>",
"reg_date":"<%= reg_date %>",
}
<%
}
}catch(Exception e){
e.printStackTrace();
}finally{
//자원정리
DBUtil.executeClose(rs, pstmt, conn);
}
%>]
getPeopleJSON.jsp 을 실행했을 떄 내용이 잘 들어가있는지 확인차. 중괄호 사이에 쉼표를 볼 수 있고 맨위 맨아래에 대괄호를 볼 수 있다.
코드 완성 후 HTML 실행영상
