상세 컨텐츠

본문 제목

jQuery - Ajax로 자료 읽기 예제

Development/JS

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

본문

jQuery 환경에서 Ajax로 자료 읽는 예제입니다.
각각 html과 json, xml 읽는 예제로 이뤄져 있습니다.
html,json,xml 파일은 단순하게 되어 있으니 github를 확인하시기 바랍니다.


<시작 | 파일명 jq9_ajax.html >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jq9.js"></script>
</head>
<body>
<h2>* Ajax로 자료 읽기(jQuery) *</h2>
<div>
     <ul>
          <li id="t1">html 읽기</li>
          <li id="t2">json 읽기</li>
          <li id="t3">xml 읽기</li>
     </ul>
</div>
<br>
<div id="disp"></div>
</body>
</html>
<종료 | 파일명 : jq9_ajax.html >

<시작 | 파일명 jq9.js >
$(document).ready(function(){
     //1.html 등 의 text 문서 읽기
     $("#t1").click(function(){
          $("#disp").hide().load("jq9_a.html",function(){
              $(this).fadeIn(); // fade effect
          });
     });
     
     //2. json 문서 읽기
     $("#t2").click(function(){
          $.getJSON("jq9_b.json", function(data){
              $("#disp").empty();
              $.each(data, function(index, value){
                   var ss = "<ol>";
                   ss += "<li>" + value["title"] + "</li>";
                   ss += "<li>" + value["desc"] + "</li>";
                   ss += "<li>" + value["title"] + "</li>";
                   ss += "</ol>";
                   $("#disp").append(ss);
              });
          });
     });
     
     //3. xml 읽기
     $("#t3").click(function(){
          $("#disp").empty();
          $.get("jq9_c.xml", function(data){
          //$.post("jq9_c.xml", function(data){ //post 형태로도 가능
              //alert($(data).find("aa").size());
              $(data).find("aa").each(function(){
                   var adata = $(this); // 현재 읽힌 aa 요소
                   var ss = "<div>";
                   // 속성 값 읽기
                   ss += aadata.attr("part") + " " + aadata.attr("term");
                   // 요소 값 읽기
                   ss += " - ";
                   ss += aadata.find("desc").text();
                   ss+= "</div>";
                   $("#disp").append(ss);
              })
              
          });
     });
});
<종료 | 파일명 : jq9.js >


[ Console 결과]



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


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


관련글 더보기

댓글 영역