Ajax
Html에서 $.ajax로 xml 파씽
웨이칭
2020. 7. 24. 12:32
index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<!-- xml ajax로 파씽 -->
<p id="demo"></p>
<br>
<button type="button">click</button>
<script type="text/javascript">
let target = [];
let link = [];
let aname = [];
$(function () {
$("button").click(function() {
$.ajax({
url:"data.xml",
datatype:"xml",
success:function(data){
//alert('success');
let xml = $(data).find("xmldata")//제일 큰 묶음(root tag)
let len = xml.find("news").length;//news 의 개수
//alert(len);//3
//data취합
for (var i = 0; i < len; i++) {
//news안의 target의 text를 찾음(eq()는 인덱스 번지)
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 (var i = 0; i < len; i++) {
$("#demo").append(target[i] + " " + link[i] + " " + aname[i] + "<br>");
}
},
error: function() {
alert("error");
}
});
});
});
</script>
</body>
</html>
data.xml
<?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>