jQuery - JSON
2020. 7. 30. 21:52ㆍjQuery
|
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.getJSON('json1.jsp',function(rdata){
$.each(rdata,function(index,item){
// alert(item.id);
//body 뒤부분에 추가 <h3>id,pass,name</h3>
$('body').append("<h3>"+item.id+", "+item.pass+", "+item.name+'</h3>');
});
});
//버튼 클릭 했을 때 json1.jsp 데이터 가져오기
$('#btn').click(function(){
$.getJSON('json1.jsp',function(rdata){
$.each(rdata,function(index,item){
$('table').append("<tr><td>"+item.id+"</td><td>"+item.pass+"</td><td>"+item.name+"</td></tr>");
});
});
$(this).unbind();
});
});
</script>
</head>
<body>
<h1>js_jQuery2/json1.html</h1>
<table border="1">
<tr><td>아이디</td><td>비밀번호</td><td>이름</td></tr>
</table>
<div></div>
<input type="button" value="데이터 가져오기" id="btn"><br>
</body>
</html>
<%@ page language="java" contentType="application/json; charset=UTF-8"
pageEncoding="UTF-8"%>
[
{ "id":"kim","pass":"1232","name":"김두한"},
{ "id":"Lee","pass":"1234","name":"이소룡"},
{ "id":"See","pass":"1231","name":"시라소니"}
]
//-----------------------------------
<%@page import="org.json.simple.JSONObject"%>
<%@page import="org.json.simple.JSONArray"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="application/json; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//js_jQuery2/json2.jsp
//데이터-> json 변경 프로그램 설치
//WebContent/WEB-INF/lib/json-simple-1.1.1.jar
//1단계 드라이버 불러오기
Class.forName("com.mysql.jdbc.Driver");
//2단계 디비 연결
String url="jdbc:mysql://localhost:3306/jspdb5";
String user="jspid";
String userpassword="jsppass";
Connection con=DriverManager.getConnection(url, user, userpassword);
//3단계 sql
String sql="select * from member";
//4단계 실행->rs
PreparedStatement pstmt=con.prepareStatement(sql);
ResultSet rs=pstmt.executeQuery();
//5단계 MemberDTO mdto(JSONObject) 한사람의 회원데이터를 담아서
// 배열 List memberList(JSONArray) 한칸 회원한사람 저장
JSONArray memberList=new JSONArray();
while(rs.next()){
//한사람 저장
JSONObject mb=new JSONObject();
mb.put("id", rs.getString("id"));
mb.put("pass", rs.getString("pass"));
mb.put("name", rs.getString("name"));
memberList.add(mb);
}
//출력
%>
<%=memberList %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//버튼 클릭해서 json2.jsp 데이터 가져와서 table 태그 추가
$('#btn').click(function(){
$.getJSON('json2.jsp',function(rdata){
$.each(rdata,function(index,item){
$('table').append('<tr><td>'+item.id+'</td><td>'+item.pass+'</td><td>'+item.name+'</td></tr>');
});
});
$(this).unbind();
});
});
</script>
</head>
<body>
<h1>js_jQuery2/json2.html</h1>
<table border="1">
<tr><td>아이디</td><td>비밀번호</td><td>이름</td></tr>
</table>
<div></div>
<input type="button" value="데이터 가져오기" id="btn"><br>
</body>
</html>
|
cs |
요새 대세라는 JSON을 배워보았다. jar파일을 복사 해 놓아야 json문법을 사용할 수 있으니 잊어먹지 말자.
링크는 따로 걸지 않아도 되는데 jquery를 미리 걸어놨으니 바로 사용 가능하다.
jQuery안에서 크게 벗어나지 않는 문법들이지만 제일 중요한 $.getJSON(); 을 잊어먹지 말도록 하자!
'jQuery' 카테고리의 다른 글
| jQuery - XML (0) | 2020.07.29 |
|---|---|
| jQuery - 결과가져오기 (0) | 2020.07.29 |
| jQuery - Login 할 때 duplication ID check (0) | 2020.07.29 |
| jQuery - inner_pade (0) | 2020.07.28 |
| jQuery - click,append,submit (0) | 2020.07.28 |