티스토리 뷰
[ 1. $.ajax( ) 메소드 - xml파일 ] (****)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
var xmlDOM;
// 비동기호출
$.ajax({
url : "xml/members.xml",
dataType : "xml",
success: function(xml){
xmlDOM = xml;
console.debug(`success invoked.`);
console.log("1.xml :", xml);
// xml파일에서 member 태그를 찾아라!
let members = $(xml).find("member");
console.log("2.members :", members);
if(members.length > 0){
let tbl = $("<table />");
$.each(members, function(i, e){
console.log("3. ", i, e);
// i = index, e = element
// console.log( e instanceof Element );
// xml은 HTMLElement가 아니다. ( Element이기는 하다. )
let id = $(e).find("id").text();
// console.log("4. id :", id);
// 각 member의 모든 속성값 추출
let firstName = $(e).find("first_name").text();
let lastName = $(e).find("last_name").text();
let email = $(e).find("email").text();
let gender = $(e).find("gender").text();
console.log(`${id}, ${firstName}, ${lastName}, ${email}, ${gender}`);
// table 태그에 추가할 행(tr 태그) 생성
let row = $("<tr>").
append(
$("<td>").text(id),
$("<td>").text(firstName),
$("<td>").text(lastName),
$("<td>").text(email),
$("<td>").text(gender)
);
// 하나의 행에 데이터로 넣는다.
tbl.append(row);
// 테이블에 행을 추가한다.
}) // each
$('.wrap').append(tbl);
} // if - 바인딩 수행
}, // success
error: function(jqXHR, textStatus, errorThrown) {
console.debug(`error invoked.`);
console.log(`textStatus : ${textStatus}, errorThrown : ${errorThrown}`);
} // error : 에러가 발생했을때 수행 ( error을 모두 작성해야 한다. 생략가능한 것이 없다. )
}) // $.ajax() 메소드
}) //.jq
</script>
</head>
<body>
<div class="wrap"></div>
</body>
</html>
728x90
'KH 정보교육원 [ Java ]' 카테고리의 다른 글
| KH 78일차 - 메이븐 (0) | 2022.06.21 |
|---|---|
| KH 77일차 - XHR / ajax 메소드 (*****) (0) | 2022.06.18 |
| KH 75일차 - 제이쿼리 ( 이벤트 메소드 ) / AJAX (*****) (0) | 2022.06.15 |
| KH 74일차 - 제이쿼리 ( 이벤트 메소드 ) (***) (0) | 2022.06.14 |
| KH 73일차 - 제이쿼리 ( 이벤트 메소드 ) (***) (0) | 2022.06.13 |
댓글