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

이번에는 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('myData.xml', 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에

태그를 동적으로 추가합니다. 이것은 관련이 없는 페이지의 전체 제목입니다.
라인 5: 또한 BODY에

태그를 동적으로 추가합니다. , 루프 아래에 콘텐츠 컨테이너를 포함하는 것으로 사용됩니다. (20행이 사용됩니다.)
7행: 콜백 함수의 매개변수 d가 XML의 모든 데이터 콜백을 나타낸다고 이미 말했기 때문에 이 행은 중요합니다. 이제 이러한 데이터를 처리(필터링)하고 형식 지정: 여기서는 책 태그(태그)가 검색된 다음 XML의 데이터 항목이 완전히 순환될 때까지 각 이후의 함수가 루프에서 실행됩니다(PHP의 foreach 함수와 약간 비슷함). )
9행: $( this)는 실제로 객체를 생성합니다. 목적은 작업을 용이하게 하기 위해 d의 현재 도서 정보 객체를 인스턴스화하는 것입니다. 10행--12행: 도서 이름을 가져옵니다. 현재 객체 $book. , 설명 및 썸네일; (속성 값과 노드 값을 가져오는 구문이 다릅니다.)
14행 - 18행: 출력을 위한 서식 지정 책 정보; 정보를 HTML로 문서에 출력합니다.
22행: 현재 정보가 XML에서 판독되고 있음을 사용자에게 알리기 위해 이미지는 2000밀리초(2초) 후에 사라집니다.
3단계: 이제 완료되었습니다. JQuery의 개발과 직면한 문제에 대해 논의하기 위해 메시지를 남기는 것은 누구나 환영합니다. 자유롭게 조언해 주시기 바랍니다. 또한, 다운로드한 폴더를 WEB 환경(IIS 또는
Virtual Host
)에서 실행하시기 바랍니다.
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Jquery+LigerUI 파일 업로드 단계에 대한 자세한 설명

jquery js 파일의 동적 로딩 자세한 설명

위 내용은 JQuery는 XML 파일을 읽고 표시합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!