본문 바로가기
HTML│CSS│Java Script

Ajax json xml 파일 읽기 2

by 자유코딩 2018. 7. 21.

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
html1208  (0) 2017.12.07

관련글

댓글

티스토리툴바