data.js
|
1
2
3
4
5
6 |
[
{"name":"고기","tel":"02-123-0491","addr":"123번지"},
{"name":"생선","tel":"02-456-1480","addr":"456번지"},
{"name":"채소","tel":"02-3453-7899","addr":"789번지"},
{"name":"과일","tel":"02-789-9600","addr":"741번지"}
] |
cs |
data.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
<?xml version="1.0" encoding="UTF-8"?>
<products>
<product>
<name>고기</name>
<tel>02-123-0491</tel>
<addr>123번지</addr>
</product>
<product>
<name>생선</name>
<tel>02-456-1480</tel>
<addr>456번지</addr>
</product>
<product>
<name>채소</name>
<tel>02-3453-7899</tel>
<addr>789번지</addr>
</product>
<product>
<name>과일</name>
<tel>02-789-9600</tel>
<addr>741번지</addr>
</product>
</products> |
cs |
data2.xml
|
1
2
3
4
5
6
7 |
<?xml version="1.0" encoding="UTF-8"?>
<products>
<product name="고기" tel="02-123-0491" addr="123번지"/>
<product name="생선" tel="02-456-1480" addr="456번지"/>
<product name="채소" tel="02-3453-7899" addr="789번지"/>
<product name="과일" tel="02-789-9600" addr="741번지"/>
</products> |
cs |
jsonTest.jsp
|
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 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>json를 jQuery로 읽기</title>
<style type="text/css">
table {width : 600px;}
table, th ,td {border: 1px solid skyblue; text-align: center;};
</style>
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
$("#out").empty(); // 초기화
var table="<table>";
table += "<thead><tr><td>메뉴</td><td>전화</td><td>주소</td></tr></thead>";
table +="<tbody>";
$.getJSON("data.js",function(res){
$.each(res,function(data){
table += "<tr><td>"+this["name"]+"</td><td>"+
this["tel"]+"</td><td>"+this["addr"]+"</td></tr>"
});
/*
$.each(res,function(key,value){
table += "<tr><td>"+value["name"]+"</td><td>"+
value["tel"]+"</td><td>"+value["addr"]+"</td></tr>"
});
*/
table +="</tbody></table>";
$("#out").append(table);
});
});
});
</script>
</head>
<body>
<div id="btn">json jQuery로 읽기</div>
<hr />
<div id="out"></div>
</body>
</html> |
cs |
script.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
var tableData
= [
{"name":"고기","tel":"02-123-0491","addr":"123번지"},
{"name":"생선","tel":"02-456-1480","addr":"456번지"},
{"name":"채소","tel":"02-3453-7899","addr":"789번지"},
{"name":"과일","tel":"02-789-9600","addr":"741번지"}
];
var table="<table>";
table += "<thead><tr><td>메뉴</td><td>전화</td><td>주소</td></tr></thead>";
table +="<tbody>";
$.each(tableData,function(data){
table += "<tr><td>"+this["name"]+"</td><td>"+
this["tel"]+"</td><td>"+this["addr"]+"</td></tr>"
});
table +="</tbody></table>";
$("#out").append(table); |
cs |
scriptTest.jsp
|
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 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>script를 jQuery로 읽기</title>
<style type="text/css">
table {width : 600px;}
table, th ,td {border: 1px solid skyblue; text-align: center;};
</style>
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
$("#out").empty(); // 초기화
$.getScript("script.js");
});
});
</script>
</head>
<body>
<div id="btn">script jQuery로 읽기</div>
<hr />
<div id="out"></div>
</body>
</html> |
cs |
xmlTest01.jsp
|
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 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>xml를 jQuery로 읽기</title>
<style type="text/css">
table {width : 600px;}
table, th ,td {border: 1px solid skyblue; text-align: center;};
</style>
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
$("#out").empty(); // 초기화
var table="<table>";
table += "<thead><tr><td>메뉴</td><td>전화</td><td>주소</td></tr></thead>";
table +="<tbody>";
$.get("data.xml",function(data){
$(data).find("product").each(function() {
var name = $(this).find("name").text();
var tel = $(this).find("tel").text();
var addr = $(this).find("addr").text();
table += "<tr>";
table += "<td>"+ name +"</td><td>"+ tel +"</td><td>"+ addr +"</td>";
table += "</tr>";
});
table +="</tbody></table>";
$("#out").append(table);
});
});
});
</script>
</head>
<body>
<div id="btn">xml jQuery로 읽기</div>
<hr />
<div id="out"></div>
</body>
</html> |
cs |
xmlTest02.jsp
|
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 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>xml를 jQuery로 읽기</title>
<style type="text/css">
table {width : 600px;}
table, th ,td {border: 1px solid skyblue; text-align: center;};
</style>
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
$("#out").empty(); // 초기화
var table="<table>";
table += "<thead><tr><td>메뉴</td><td>전화</td><td>주소</td></tr></thead>";
table +="<tbody>";
$.get("data2.xml",function(data){
$(data).find("product").each(function() {
var name = $(this).attr("name");
var tel = $(this).attr("tel");
var addr = $(this).attr("addr");
table += "<tr>";
table += "<td>"+ name +"</td><td>"+ tel +"</td><td>"+ addr +"</td>";
table += "</tr>";
});
table +="</tbody></table>";
$("#out").append(table);
});
});
});
</script>
</head>
<body>
<div id="btn">xml jQuery로 읽기</div>
<hr />
<div id="out"></div>
</body>
</html> |
cs |
'HTML│CSS│Java Script' 카테고리의 다른 글
| Ajax 로 DB에 접근하기 1 (0) | 2018.07.21 |
|---|---|
| Ajax 로 json , xml 읽어들이기 3 (0) | 2018.07.21 |
| Ajax 자바 스크립트 다른 jsp 파일 읽기 (2) | 2018.07.21 |
| Ajax 자바스크립트로 xml , json 파일 읽기 (0) | 2018.07.21 |
| html 예제 코드 / html 공부 / 점선 , 실선 , 배경 , 표 , 블록레벨 , 인라인 (0) | 2017.12.07 |
댓글