반응형
<?xml version="1.0" encoding="UTF-8"?>
<xmldata>
<news>
<target>naver</target>
<link>http://www.naver.com</link>
<aname>네이버</aname>
</news>
<news>
<target>daum</target>
<link>http://www.daum.net</link>
<aname>다움</aname>
</news>
<news>
<target>google</target>
<link>http://www.google.co.kr</link>
<aname>구글</aname>
</news>
</xmldata>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<p id="demo"></p>
<br>
<button>click</button>
<script type="text/javascript">
var target = [];
var link = [];
var aname = [];
$(function() {
$("button").click(function () {
$.ajax({
url:"data.xml",
datatype:"xml",
success: function(data){
//alert('success');
var xml = $(data).find("xmldata"); //root
var len = xml.find("news").length;
//alert(len);
for(i = 0; i < len; i++){
target[i] = xml.find("news").eq(i).find("target").text();
link[i] = xml.find("news").eq(i).find("link").text();
aname[i] = xml.find("news").eq(i).find("aname").text();
}
for(i = 0; i < len; i++){
$("#demo").append(target[i] + " " + link[i] + " " +aname[i] + "<br>");
}
},
error:function(){
alert('error');
}
});
});
});
</script>
</body>
</html>반응형
'JavaScript > Ajax, Axios(비동기 통신)' 카테고리의 다른 글
| axios 모듈화하기 (0) | 2020.03.21 |
|---|---|
| XMLHttpsRequest, axios 로 백엔드 서버에 요청 보내 보기 (0) | 2020.03.21 |
| json <-> ajax간 연동 (0) | 2020.01.22 |
| jsp < - > ajax간 데이터 연동 (0) | 2020.01.22 |
