Ajax : DB데이터를 불러와서 json형태로 변경하여 출력하기

필요한 라이브러리 추가

필요한 라이브러리는 2가지

  1. json-simple 라이브러리 추가
    • 가장 최신버전을 다운르도하면 된다 json-simple-1.1.1.jar
  2. connector라이브러리 추가
    • mysql-connector-java-5.1.38-bin.jar

Json3.html생성

DB(Mysql)에 저장된 정보를 JSON으로 변경해서 출력

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script src="../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" >

$(function(){
$.getJSON('Json3.jsp', function(data){
$.each(data, function(index, item){
$('table').append("<tr><td>"+item.name+"</td>"+"<td>"+item.subject+"</td>"+"<td>"+item.content+"</td></tr>")
})

})
})
</script>
</head>
<body>
<h1> DB(Mysql)에 저장된 정보를 JSON으로 변경해서 출력 </h1>
<table border="1">
<tr>
<td>작성자</td>
<td>글 제목</td>
<td>글 내용</td>
</tr>
</table>

//출력값
DB(Mysql)에 저장된 정보를 JSON으로 변경해서 출력
작성자 글 제목 글 내용
a a aaa
hoho 아프지말고~ 자이언티~
b b b
c c c
d d d
e e e
점심 오늘 점심메뉴 오늘 점심메뉴는 쌀국수이다.

Json3.jsp생성

DB데이터를 불러와서 JSON형태로 변경해서 출력

  1. html 태그 삭제
  2. contentType=”application/json; charset=UTF-8” 로 변경
  3. 드라이버로드 > DB연결 > sql & pstmt > 실행 > 데이터처리
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<%@page import="org.json.simple.JSONObject"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.SQLException"%>
<%@ page language="java" contentType="application/json; charset=UTF-8"
pageEncoding="UTF-8"%>

<%
//<h1> DB데이터를 불러와서 JSON형태로 변경 출력 </h1>
// 1. 드라이버로드
String DRIVER = "com.mysql.jdbc.Driver";
String DBURL = "jdbc:mysql://localhost:3306/jspdb"; //사용할DB이름
String DBID = "root";
String DBPW = "1234";

//2. DB연결
Class.forName(DRIVER);
System.out.println("드라이버 로드 성공!");
Connection con = DriverManager.getConnection(DBURL, DBID, DBPW);
System.out.println("DB 연결 성공!"+con);
//3.sql & pstmt
String sql = "select * from itwill_board";
PreparedStatement pstmt = con.prepareStatement(sql);
//4.실행
ResultSet rs = pstmt.executeQuery();
//5.
//기존방식: 행 1줄을 자바빈객체에 저장해서 ArrayList 한 칸에 저장
//json이용한 방식: 행 1줄을 jsonObject객체에 저장해서 JsonArray 한 칸에 저장

//5-2.JSONArray 생성
JSONArray arr = new JSONArray();

//5-1.while문
while(rs.next()){
//json object 생성 (import json-simple패키지해야함)
JSONObject obj = new JSONObject();
obj.put("name", rs.getString("name"));
obj.put("subject", rs.getString("subject"));
obj.put("content", rs.getString("content"));
//obj.put("date", rs.getDate("date"));

//5-3.배열한칸에 객체 하나를 저장
arr.add(obj);
}
%>

<%=arr%>

JSON 활용법 중의 하나인 RSS사용법

RSS 기상청이나 뉴스등에서 정보를 실시간으로 받아서 내 페이지에 자동으로 출력시켜줄 수 있다.

  1. 위의 RSS파일을 클릭하여 주소창의 주소를 복사
  2. 주소를 바로 붙여넣어서 될 수도 있고
  3. 그게 안되면 구글 RSS API를 통하여 RSS데이터를 출력할 수 있다.