상세 컨텐츠

본문 제목

jQuery - Ajax 전담 메소드를 활용하여 json,xml 읽기 예제

Development/JS

by 에스프리터 2018. 2. 28. 17:49

본문

본 예제는 Ajax 전담 메소드를 활용하여 xml과 json을 읽는 예제입니다.
샘플 데이터 파일 코드는 github에서 확인하시기 바랍니다.


<시작 | 파일명 : jq10.html > 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jq10.js"></script>
</head>
<body>
** jQuery.ajax() : Ajax 전담 메소드 **<br><br>
<button id = "btn1">xml 읽기 - para x</button>
<button id = "btn2">xml 읽기 - para o</button><br><br>
<button id = "btn3">json 읽기 - para x</button>
<button id = "btn4">json 읽기 - para o</button><br>
<hr>
결과 :
<div id ="disp"></div>
</body>
</html>
<종료 | 파일명 : jq10.html >

<시작 | 파일명 : jq10.js > 
$(document).ready(function(){
     //XML
     $("#btn1").click(function(){
          //alert("1");
          $.ajax({
              type:"get",
              url:"jq10_1.jsp",
              dataType:"xml",
              success:function(data){
                   //alert(data);
                   var str = "";
                   $(data).find("person").each(function(){
                        str += $(this).find("irum").text() + " ";
                        // $("#disp").append(str); 이걸 사용하면 누적되게 됨
                   });
                   $("#disp").html(str);
              },
              error:function(){
                   $("#disp").text("에러가 터졌음다");
                   //$("#disp").html("data");
                   //$("#disp").append("data");
              }
          });
     });
     
     $("#btn2").click(function(){ // para 0
          $.ajax({
              type:"post",
              url:"jq10_2.jsp",
              //data: "irum=" + "손오공&age=" + "손오공",
              data:{"irum":"사오정"}, // 이 방법이 조금 더 깔끔함
              dataType:"xml",
              success:function(data){
                   var str = "";
                   $(data).find("person").each(function(){
                        str += $(this).find("irum").text() + " ";
                   });
                   $("#disp").html(str);
              },
              error:function(){
                   $("#disp").text("에러가 터졌음다");
              }
          });
     });
     
     //JSON
     $("#btn3").click(function(){
          //alert("1");
          $.ajax({
              type:"get",
              url:"jq10_3.jsp",
              dataType:"json",
              success:function(data){//data는 임의로 지정한 값
                   //alert(data);
                   var ss = "";
                   $.each(data, function(index, entry){ //데이터가 반복됨.
                        ss += entry["name"] + ", " + entry.age; //["name"]아나 .name이나 동일하게 가능
                   });
                   //$("#disp").append(ss); //append 이기 때문에 누적됨
                   $("#disp").text(ss); //element가 있으면 html, 없으면 text
              },
              error:function(){
                   $("#disp").text("에러가 터졌네요"); //id가 disp인 것에 표현
              }
              
          });
     });
     
     $("#btn4").click(function(){
          $.ajax({
              type:"post",
              url:"jq10_4.jsp",
              data:{"sangpum":"장수","irum":"장비", "nai":33}, // post 방식으로 호출하고 데이터를 장비,33살로 부름
              dataType:"json",
              success:function(data){//data는 임의로 지정한 값
                   //alert(data);
                   var ss = "";
                   $.each(data, function(index, entry){ //데이터가 반복됨.
                        ss += entry["name"] + ", " + entry.age; //["name"]아나 .name이나 동일하게 가능
                   });
                   //$("#disp").append(ss); //append 이기 때문에 누적됨
                   $("#disp").text(ss); //element가 있으면 html, 없으면 text
              },
              error:function(){
                   $("#disp").text("에러가 터졌네요"); //id가 disp인 것에 표현
              }
              
          });
     });
     
});
<종료 | 파일명 : jq10.js >


[ Console 결과]



[Github 안내] 
- Github에서 파일을 확인하시려면 바로가기를 눌러주세요.
- 해당 예제는 espriter_practice/WebContent/'03_10_jQuery_read_xml_json' 에 있습니다.


본 포스팅은 IT 교육기관인 KIC 캠퍼스에서 공부하며 작성한 리포트입니다.
혹시 잘못된 내용이 있거나 문제 소지시 댓글 남겨주시면 조치하겠습니다.



관련글 더보기

댓글 영역