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>
'IT > jQuery' 카테고리의 다른 글
| jQuery - 구글 차트 GoogleChart (0) | 2018.11.19 |
|---|---|
| jQuery - 이미지 사이즈 변경, 이미지 자동으로 넘김 처리 (0) | 2018.11.18 |
| jQuery - ajax통신, json, xml 사용 예제 (0) | 2018.11.18 |
| jQuery - checkbox attr과 prop의 차이 (0) | 2018.11.17 |
| jQuery - 애니메이션 show(), hide(), toggle(), innerfade, animate (0) | 2018.11.17 |