IT/jQuery

jQuery - ajax통신, json DB연결하여 생성, json-simple 라이브러리 사용

노마드오브 2018. 11. 18. 22:28

json.jsp

<%@ page language="java" contentType="application/json; charset=UTF-8"

    pageEncoding="UTF-8"%>

{"name": "홍길동", "gender": "남자", "email": "aa@a.com"}




json.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

// 자바 컬렉션에서의 Map은 키, 값 쌍인 것은 같으나 순서정보는 없음

// 자바스크립트에서의 {}는 키, 값 쌍이면서 나열된 순서정보를 가짐.

// {"name": "홍길동", "gender": "남자", "email": "aa@a.com"}


$(document).ready(function () {

$('button').click(function () {

// 버튼이 클릭되면 ajax 호출

$.ajax('json.jsp', {

success: function (result) {

//alert(result.name + ', ' + result.gender + ', ' + result.email);

// 배열이 아닌 일반객체를 처리할 대상으로 받았을 경우

// 두번째 인자의 매개변수의 의미가 달라진다.

$.each(result, function (key, value) {

$('div').append(key + ' : ' + value + '<br>');

});

} 

});

});

});

</script>

</head>

<body>

<button type="button">버튼</button>

<div></div>

</body>

</html>




json2.jsp

<%@ page language="java" contentType="application/json; charset=UTF-8"

    pageEncoding="UTF-8"%>

[{"name": "홍길동", "gender": "남자", "email": "aa@a.com"},

  {"name": "성춘향", "gender": "여자", "email": "bb@b.com"},

  {"name": "이몽룡", "gender": "남자", "email": "cc@c.com"}]




json2.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>


function proc(result) {

$.each(result, function (index, item) {

var str = '<tr><td>'+item.name+'</td>';

str += '<td>' + item.gender + '</td>';

str += '<td>' + item.email + '</td></tr>';

$('table').append(str);

});

}


$(document).ready( function () {


$('button').click(function () {

$.ajax({

url: 'json2.jsp',

success: function (result) {

//alert(result);

proc(result);

} // success

});

});

});

</script>

</head>

<body>

<button type="button">버튼</button>

<div></div>

<table border="1">

<tr>

<th>이름</th>

<th>성별</th>

<th>이메일</th>

</tr>

</table>

</body>

</html>




 

* json-simple 라이브러리 다운로드

https://code.google.com/archive/p/json-simple/downloads

https://mvnrepository.com/



import org.json.simple.JSONArray;

import org.json.simple.JSONObject;

.

.

.


MemberDao.java의 getMembersJSON() 메소드

// 전체회원목록 가져오기

    @SuppressWarnings("unchecked")

public JSONArray getMembersJSON() {

Connection con = null;

PreparedStatement pstmt = null;

ResultSet rs = null;

JSONArray jsonArray = new JSONArray();

try {

con = H2DB.getConnection();

// 3. sql   전체회원 가져오기

String sql = "SELECT * FROM member";

pstmt = con.prepareStatement(sql);

// 3. rs 저장

rs = pstmt.executeQuery();

// rs 데이터 있으면  자바빈 객체생성

// rs => 자바빈 멤버변수 저장

// 자바빈 => 리스트 한칸 추가

while (rs.next()) {

// JSONObject는 Map을 구현

JSONObject obj = new JSONObject();

// rs => JSONObject 저장

obj.put("id", rs.getString("id"));

obj.put("passwd", rs.getString("passwd"));

obj.put("name", rs.getString("name"));

obj.put("reg_date", rs.getString("reg_date"));

obj.put("age", rs.getString("age"));

obj.put("gender", rs.getString("gender"));

obj.put("email", rs.getString("email"));

// JSONObject => JSONArray에 한개 추가

jsonArray.add(obj); // 배열리스트에 추가

}

} catch (Exception e) {

e.printStackTrace();

} finally {

H2DB.closeJDBC(con, pstmt, rs);

}

return jsonArray;

} // getMembersJSON()



jsonMembers.jsp

<%@page import="org.json.simple.JSONArray"%>

<%@page import="com.example.domain.Member"%>

<%@page import="java.util.List"%>

<%@page import="com.example.repository.MemberDao"%>

<%@ page language="java" contentType="application/json; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

// json-simple 라이브러리 사용

// https://code.google.com/archive/p/json-simple/


// DB객체 준비

MemberDao memberDao = MemberDao.getInstance();

// 데이터 가져오기

JSONArray jsonArray = memberDao.getMembersJSON();

//System.out.println(jsonArray.toString());

//out.println(jsonArray);

%>

<%=jsonArray %> 




jsonMembers.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>


function proc(result) {


$.each(result, function (index, item) {

var str = '<tr><td>'+item.id+'</td>';

str += '<td>' + item.name + '</td>';

str += '<td>' + item.email + '</td></tr>';

$('table').append(str);

});

}


$(document).ready( function () {


$('button').click(function () {

$.ajax({

url: 'jsonMembers.jsp',

success: function (result) {  // [] 자바스크립트 배열 타입으로 매개변수 전달받음

proc(result);

}, // success

error: function (request, status, error) {

var str = 'code: '+request.status+'\n';

str += 'message: ' + request.responseText+'\n';

str += 'error: ' + error;

alert(str);

}

});

});

});

</script>

</head>

<body>

<button type="button">버튼</button>

<div></div>

<table border="1">

<tr>

<th>아이디</th>

<th>이름</th>

<th>이메일</th>

</tr>

</table>

</body>

</html>