본문 바로가기
CLASS/AJAX

#5-3 / Jquery Ajax & API 서버통신 (XML 로드)

by hingu 2024. 7. 19.
⚡ XML 로드

xml파일 강제루 미리 제작해둠
- data.xml
<?xml version="1.0" encoding="UTF-8"?>
<apink>
	<userlist>
		<username>홍길동</username>
		<userid>hong</userid>
		<useremail>hong@nate.com</useremail>
		<userage>25</userage>
	</userlist>
	<userlist>
		<username>이순신</username>
		<userid>lee</userid>
		<useremail>sunsin@daum.net</useremail>
		<userage>33</userage>
	</userlist>
</apink>

 

url 접속시 이렇게 확인 가능!


- ajax2.jsp
<body>
	<input type="button" value="데이터 로드(XML)" id="btn">
</body>

<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
		$.ajax({
			url : "./data.xml",
			cache : false,
			type : "GET",
			dataType : "XML",
			success:function(data){
				//반복문 돌려서 알아서 잘 출력하면됨ㅎ
				var datalength = $(data).find("apink").find("username").length;
				var f;
				for(f=0; f<datalength; f++){
					var username = $(data).find("apink").find("username")[f].innerHTML;
					var userid = $(data).find("apink").find("userid")[f].innerHTML;
					var useremail = $(data).find("apink").find("useremail")[f].innerHTML;
					var userage = $(data).find("apink").find("userage")[f].innerHTML;
					
					console.log(username,userid,useremail,userage)
				}

			},
			error:function(data){
				console.log("서버파일 오류!");
			}
		});
	});
})
</script>

 

걍 data로만 찍었을 때

 

반복문으로 data 출력시 요렇게 원하는것만 출력 가능!!