data.js
|
1
2
3
4
5
6 |
[
{"name":"고기","tel":"02-123-4562","addr":"123번지"},
{"name":"생선","tel":"02-456-4262","addr":"234번지"},
{"name":"채소","tel":"02-789-1535","addr":"345번지"},
{"name":"과일","tel":"02-159-4895","addr":"456"}
] |
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-1563</tel>
<addr>123번지</addr>
</product>
<product>
<name>생선</name>
<tel>02-234-1532</tel>
<addr>234번지 </addr>
</product>
<product>
<name>채소</name>
<tel>02-345-4895</tel>
<addr>345번지</addr>
</product>
<product>
<name>과일</name>
<tel>02-456-9518</tel>
<addr>456</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-1234" addr="123번지" />
<product name="생선" tel="02-234-2345" addr="234번지" />
<product name="채소" tel="02-345-3456" addr="345번지" />
<product name="과일" tel="02-456-4567" addr="456번지" />
</products> |
cs |
ex01.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
46
47
48
49 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax로 xml 읽어들이기</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() {
$.ajax({
url : "data.xml", // 정보위치(서버 위치)
dataType : "xml" , // 응답결과의 타입
type : "get", // "post", "get"
// data : 요청에 전달되는 프로퍼티
// timeout(숫자) : 요청의 제한 시간,
success : function(data) {
// alert("성공");
var table = "<table>";
table
+= "<thead><tr><th>메뉴</th><th>전화</th><th>주소</th></tr></thead>";
table +="<tbody>";
$(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><td>"+name+"</td><td>"+tel+"</td><td>"+addr+"</td></tr>";
});
table +="</tbody></table>";
$("#out").append(table);
},
error : function() {
alert("실패");
}
});
});
</script>
</head>
<body>
<h2> 결과 보여주기 </h2>
<br /><hr />
<div id="out"></div>
</body>
</html> |
cs |
ex02.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
46
47
48
49 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax로 xml 읽어들이기</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() {
$.ajax({
url : "data2.xml", // 정보위치(서버 위치)
dataType : "xml" , // 응답결과의 타입
type : "get", // "post", "get"
// data : 요청에 전달되는 프로퍼티
// timeout(숫자) : 요청의 제한 시간,
success : function(data) {
// alert("성공");
var table = "<table>";
table
+= "<thead><tr><th>메뉴</th><th>전화</th><th>주소</th></tr></thead>";
table +="<tbody>";
$(data).find("product").each(function() {
var name = $(this).attr("name");
var tel = $(this).attr("tel");
var addr = $(this).attr("addr");
table
+="<tr><td>"+name+"</td><td>"+tel+"</td><td>"+addr+"</td></tr>";
});
table +="</tbody></table>";
$("#out").append(table);
},
error : function() {
alert("실패");
}
});
});
</script>
</head>
<body>
<h2> 결과 보여주기 </h2>
<br /><hr />
<div id="out"></div>
</body>
</html> |
cs |
ex03.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
46 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax로 xml 읽어들이기</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() {
$.ajax({
url : "data.js", // 정보위치(서버 위치)
dataType : "json" , // 응답결과의 타입
type : "get", // "post", "get"
// data : 요청에 전달되는 프로퍼티
// timeout(숫자) : 요청의 제한 시간,
success : function(data) {
// alert("성공");
var table = "<table>";
table
+= "<thead><tr><th>메뉴</th><th>전화</th><th>주소</th></tr></thead>";
table +="<tbody>";
$.each(data,function(data){
table += "<tr><td>"+this["name"]+"</td><td>"+this["tel"]
+"</td><td>"+this["addr"]+"</td></tr>";
});
table +="</tbody></table>";
$("#out").append(table);
},
error : function() {
alert("실패");
}
});
});
</script>
</head>
<body>
<h2> 결과 보여주기 </h2>
<br /><hr />
<div id="out" width></div>
</body>
</html> |
cs |
'HTML│CSS│Java Script' 카테고리의 다른 글
| css 웹 사이트 배경 대각선으로 나누기 - linear-gradient (0) | 2020.03.27 |
|---|---|
| Ajax 로 DB에 접근하기 1 (0) | 2018.07.21 |
| Ajax json xml 파일 읽기 2 (0) | 2018.07.21 |
| Ajax 자바 스크립트 다른 jsp 파일 읽기 (2) | 2018.07.21 |
| Ajax 자바스크립트로 xml , json 파일 읽기 (0) | 2018.07.21 |
댓글