우선 라이브러리 설치가 필요하다.
https://code.google.com/archive/p/json-simple/downloads 이동
왼쪽 카테고리에서 Downloads로 이동
제일 위에 json-simple-1.1.1.jar 다운
프로젝트에 라이브러리 설치하기!
-------------------------------------------------- dbJSON.jsp --------------------------------------------------
- DB에서 데이터 가져와서 JSON 형태로 만드는 파일
- 아래쪽의 html 코드 내용은 지우고 작성
- contentType은 application/json; 으로 수정하기
<%
// dbJSON.jsp
// DB정보를 가져와서 -> JSON형태로 변경
// 1. 드라이버 로드
Class.forName("com.mysql.cj.jdbc.Driver");
// 2. 디비 연결
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/jspdb", "root", "1234");
// 3. sql 생성 & pstmt 객체
String sql = "select * from itwill_member";
PreparedStatement pstmt = con.prepareStatement(sql);
// 4. sql 실행
ResultSet rs = pstmt.executeQuery();
// 5. 데이터 처리 => DB정보를 JSON 형태로 변경
// json-simple-1.1.1.jar 라이브러리가 해줌!!
JSONArray memberList = new JSONArray();
while(rs.next()) {
JSONObject obj = new JSONObject();
obj.put("id", rs.getString("id"));
obj.put("pw", rs.getString("pw"));
obj.put("name", rs.getString("name"));
obj.put("gender", rs.getString("gender"));
obj.put("age", rs.getInt("age"));
obj.put("email", rs.getString("email"));
// 날짜 데이터는 문자형식으로 변경해줘야함!!
obj.put("reg_date", rs.getDate("reg_date")+"");
memberList.add(obj);
}
%>
<%=memberList %>
-------------------------------------------------- ajaxJSONDB.html --------------------------------------------------
<script src="../js/jquery-3.6.0.min.js"></script> // 제이쿼리 사용위한 코드
<script type="text/javascript">
$(function(){
$.getJSON({
url: "dbJSON.jsp",
success: function(data){
$.each(data, function(index, item){
// 데이터 받아와서 아래 테이블에 추가함
$('table').append("<tr><td>"+item.id+"</td><td>"+item.pw+"</td><td>"+item.name+"</td><td>"+item.age+"</td><td>"+item.gender+"</td><td>"+item.email+"</td><td>"+item.reg_date+"</td></tr>");
});
}
});
});
</script>
</head>
<body>
<table border="1">
<tr>
<td>아이디</td>
<td>비밀번호</td>
<td>이름</td>
<td>나이</td>
<td>성별</td>
<td>이메일</td>
<td>회원가입일</td>
</tr>
</table>
</body>
'2. Front-end > 2-3. Java Script' 카테고리의 다른 글
JS - [ 오늘부터 14일간 날짜 출력 ] (0) | 2022.05.24 |
---|---|
JS - [ Swiper 라이브러리 ] (0) | 2022.05.03 |
JQuery - [ Ajax RSS ] (0) | 2022.05.01 |
JQuery - [ XML / JSON + AJAX ] (0) | 2022.04.30 |
JQuery - [ Ajax 기본 사용] (0) | 2022.04.28 |