728x90
반응형
<!DOCTYPE html>
<!-- /jquery1/src/main/webapp/jqueryajax/jqueryajax3.html -->
<html>
<head>
<meta charset="UTF-8">
<title>XML 연습</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() { //문서 준비 완료
$("#btn").click(function(){
$.ajax("ajax3.xml",{
success : function(data) {
//data : 서버에서 전달해준 내용
//$(data) : xml 형태의 문서를 파싱(분석)하여 DOM객체의 문서노드를 리턴
//$(data).find("person") : 문서노드의 하위 태그 중 person 태그들을 검색 배열로 전달
$(data).find("person").each(function(){
//$(this) : person 태그 한개
//$(this).find("name") : 현재의 person 태그의 하위태그중 name 태그 리턴
name = "<li>" + $(this).find("name").text() + "</li>"
gender = "<li>" + $(this).find("gender").text() + "</li>"
part = "<li>" + $(this).find("part").text() + "</li>"
$("#person").append("<ul>" + name + gender + part + "</ul>")
})
},
error : function(e) {
alert("서버 오류:" + e.status)
}
})
})
$("#allbtn").click(function(){
$("#state").html(""); //id=state 인 태그의 내용 제거
$.ajax("../ajax/address.xml",{
success : function(data) {
$("#state").append("<h3>서울 전체 구</h3>")
$(data).find("state").each(function(){
//$(this) : 서버가 전달해준 xml 데이터 중 한개의 state 태그
$("#state").append("-" + $(this).text() + "<br>")
})
},
error : function(e) {
alert("서버 오류:" + e.status)
}
})
})
}) //$(function(){...})
function stateprint(st) {
$("#state").html("");
$.ajax("../ajax/address.xml",{
success : function(data) {
if(st == 'east')
$("#state").append("<h3>서울 동쪽 구</h3>")
else if(st == 'west')
$("#state").append("<h3>서울 서쪽 구</h3>")
else if(st == 'south')
$("#state").append("<h3>서울 남쪽 구</h3>")
else if(st == 'north')
$("#state").append("<h3>서울 북쪽 구</h3>")
//$(data).find(st) : east/west/south/north 태그 선택
//$(data).find(st).find("state") : east/west/south/north 태그 선택된 태그의 state 태그들
$(data).find(st).find("state").each(function(){
$("#state").append("-" + $(this).text() + "<br>")
})
},
error : function(e) {
alert("서버 오류:" + e.status)
}
})
}
</script>
</head>
<body>
<button id="btn">XML 연습</button>
<div id="person"></div>
<hr>
<!-- ajax 폴더의 address.xml 파일을 이용하여 각 구의 정보 출력하기 -->
<button id="allbtn">서울 전체 구</button>
<button onclick="stateprint('east')">동쪽구</button>
<button onclick="stateprint('west')">서쪽구</button>
<button onclick="stateprint('south')">남쪽구</button>
<button onclick="stateprint('north')">북쪽구</button>
<div id="state"></div>
</body>
</html><?xml version="1.0" encoding="UTF-8"?>
<!-- /jquery1/src/main/webapp/jqueryajax/ajax3.xml -->
<people>
<person>
<name>
임완준
</name>
<gender>
남자
</gender>
<part>
기타
</part>
</person>
<person>
<name>
박민
</name>
<gender>
여자
</gender>
<part>
드럼
</part>
</person>
<person>
<name>
임금
</name>
<gender>
여자
</gender>
<part>
보컬
</part>
</person>
</people><?xml version="1.0" encoding="UTF-8"?>
<!-- /jquery1/src/main/webapp/jqueryajax/adress.xml -->
<state>
<east>
<state>강동구</state>
<state>송파구</state>
<state>성동구</state>
</east>
<west>
<state>강서구</state>
<state>구로구</state>
<state>양천구</state>
</west>
<south>
<state>강남구</state>
<state>서초구</state>
<state>관악구</state>
</south>
<north>
<state>강북구</state>
<state>노원구</state>
<state>도봉구</state>
</north>
</state>728x90
반응형
'study > Ajax' 카테고리의 다른 글
| [Ajax] 23. 시,군,도 출력하기 (doGet방식) (0) | 2022.05.02 |
|---|---|
| [Ajax] 23. JSON 연습 ( Ajax폴더의 house.jsp를 이용하여 table 형태로 출력하기) (0) | 2022.04.28 |
| [Ajax] 23. Ajax를 이용한 로그인 (0) | 2022.04.28 |
| [Ajax] 23. jquery를 이용한 Ajax연습 (0) | 2022.04.27 |
| [Ajax] 22. Ajax로 xml 예제1 (0) | 2022.04.27 |