고정 헤더 영역
상세 컨텐츠
본문
본 예제는 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 안내]
- 해당 예제는 espriter_practice/WebContent/'03_10_jQuery_read_xml_json' 에 있습니다.
본 포스팅은 IT 교육기관인 KIC 캠퍼스에서 공부하며 작성한 리포트입니다.
혹시 잘못된 내용이 있거나 문제 소지시 댓글 남겨주시면 조치하겠습니다.
'Development > JS' 카테고리의 다른 글
| 라즈베리파이에 Mariadb 설치하기 #2 (0) | 2018.05.09 |
|---|---|
| jQuery - 다른 도메인 서버의 json 자료 읽기 예제 (0) | 2018.03.08 |
| jQuery - JSON 데이터를 호출하고 검색 건수 확인 예제 (0) | 2018.03.08 |
| jQuery - Ajax 전담 메소드를 활용하여 json,xml 읽기 예제 (0) | 2018.02.28 |
| jQuery - Ajax로 자료 읽기 예제 (0) | 2018.02.28 |
| jQuery - jQuery 기본 예제 #8 (0) | 2018.02.27 |
| jQuery - jQuery 기본 예제 #7 (0) | 2018.02.27 |
댓글 영역