JQuery는 XML 파일을 읽고 표시합니다.

php中世界最好的语言

풀어 주다： 2018-04-23 14:55:39

원래의

1949명이 탐색했습니다.

이번에는 XML 파일을 읽고 표시하는 JQuery를 소개하겠습니다. JQuery에서 XML 파일을 읽고 표시하는 데 필요한 주의 사항은 무엇입니까?

시작하기 전에 다음을 준비해야 합니다.
1. DEMO.html이라는 이름의 빈 HTML 파일을 만듭니다. (생성하려면 Editplus를 사용하는 것이 좋습니다.)
2. (익숙하더라도 상관없습니다. 나중에 자세히 설명하겠습니다.)
3. 데이터를 저장할 XML 파일을 만듭니다. 아래에서 내가 패키지한 파일을 다운로드할 수도 있습니다.
4 .loading.gif 이미지. 이 이미지는 XML을 읽는 동안 빈 HTML 문서에 표시되는 데 사용됩니다.
공식 시작
1단계: 먼저 이 data.xml의 간단한 구조를 살펴보겠습니다. 여기에서 설명하겠습니다. 데이터는 "Saturn이 추천하는 여러 책"이므로 책 정보이고 xml에는 이름, 썸네일 및 책 설명 정보가 포함됩니다.
다음은 XML 파일 코드입니다.

<?xml version="1.0" encoding="utf-8" ?> 
<books> 
<book title="藏地密码" imageurl="images/Tibet_Code.jpg"> 
<description> 
这里是概况
</description> 
</book> 
<book title="剑桥雅思6" imageurl="images/ielts.jpg"> 
<description> 
这里是概况
</description> 
</book> 
<book title="Professional ASP.NET" imageurl="images/asp.jpg"> 
<description> 
这里是概况=
</description> 
</book> 
</books>

로그인 후 복사

두 번째로 빈 HTML 문서에 로드된 JavaScript 코드를 살펴보겠습니다.

$(document).ready(function() 
{ 
$.get(&#39;myData.xml&#39;, function(d){ 
$(&#39;body&#39;).append(&#39;<h1> Saturn给你推荐几本书： </h1>&#39;); 
$(&#39;body&#39;).append(&#39;<dl />&#39;); 
$(d).find(&#39;book&#39;).each(function(){ 
var $book = $(this); 
var title = $book.attr("title"); 
var description = $book.find(&#39;description&#39;).text(); 
var imageurl = $book.attr(&#39;imageurl&#39;); 
var html = &#39;<dt> <img class="bookImage" alt="" src="&#39; + imageurl + &#39;" /> </dt>&#39;; 
html += &#39;<dd> <span class="loadingPic" alt="Loading" />&#39;; 
html += &#39;<p class="title">&#39; + title + &#39;</p>&#39;; 
html += &#39;<p> &#39; + description + &#39;</p>&#39; ; 
html += &#39;</dd>&#39;; 
$(&#39;dl&#39;).append($(html)); 
$(&#39;.loadingPic&#39;).fadeOut(2000); 
}); 
}); 
});

로그인 후 복사

2단계: 여기서는 원리와 작동 과정에 대해서만 이야기하겠습니다. 구문에 대해 너무 많이 논의하지 않을 것입니다. 구문에 대해 궁금한 점이 있으면 메시지를 남기거나 JQuery 관련 문서를 확인하십시오.
1행: HTML 문서가 준비되면(즉, html과 JavaScript가 모두 다운로드됨) JQuery의 $(document).ready 메서드와 내부 프로세스가 자동으로 트리거됩니다. 분명히 여기서는 $.get 메소드가 먼저 실행됩니다.
3행: $.get의 첫 번째 매개변수는 XML 파일의 상대 경로입니다(경로를 올바르게 입력해야 합니다. 여기서는 XML과 웹 페이지 파일을 동일한 폴더에 넣습니다). 두 번째 매개변수는 콜백 함수, 즉 콜백 함수입니다. 즉, 이 XML 파일의 내용은 get 메소드를 통해 요청되고 내부 데이터는 이 콜백 함수를 통해 조작됩니다. 콜백의 매개변수 d는 XML 콜백에서 반환된 모든 데이터를 나타냅니다. 이 매개변수 d를 사용하면 다음 내용을 진행할 수 있습니다.
라인 4: JavaScript를 통해 문서의 BODY에