jquery로 여러개 데이터 파싱하기 : each

 자바에서 보내는 데이터

// xml 응답

StringBuilder sb = new StringBuilder();

sb.append("<?xml version='1.0' encoding='utf-8'?>");

sb.append("<list>");

sb.append("<data>");

sb.append("<no>123</no>");

sb.append("<name>하이영</name>");

sb.append("<email>ㄴㄴㄷㄹ@.ㅇㅇ.ㅇ.ㅇ</email>");

sb.append("</data>");

sb.append("<data>");

sb.append("<no>434</no>");

sb.append("<name>아헤헤헤</name>");

sb.append("<email>1ㅁ@cdd.com</email>");

sb.append("</data>");

sb.append("</list>");

String xmlData = sb.toString();

resp.setContentType("text/xml; charset=utf-8");

resp.getWriter().write(xmlData);

스크립트에서 파싱하기

<script type="text/javascript">

 $(document).ready(function(){

$("button").click(function(){

$.ajax({

type:"GET", //요청방식

url:"/test/demo", //요청URL

dataType:"xml", //응답데이타타입

success:function(result, status){ //정상응답일 경우

console.log("success");

var html ="";

$(result).find("data").each(function(index, item){ //여러개의 데이터를 파싱하는 방법 : each ->향상된 for문장같이 행동

var no = $(item).find("no").text();

var name = $(item).find("name").text();

var email = $(item).find("email").text();

html += "<ul>";

html += "<li>번호" + no + "</li>";

html += "<li>이름" + name + "</li>";

html += "<li>메일" + email + "</li>";

html += "</ul>";

});

$("#view").html(html);

},

error:function(){ //에러응답일 경우

console.log("error");

}

});

});

 });

</script>

// console에 다음을 찍어보면 jquery가 데이터를 어떻게 파싱하는지 알 수 있다.

$(result).find("data")