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

CLASS/AJAX

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

hingu 2024. 7. 19. 12:01

⚡ 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>

- 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>