JQuery는 XML 파일을 읽고 표시합니다.
- php中世界最好的语言원래의
- 2018-04-23 14:55:391955검색
이번에는 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){
$('body').append('<h1> Saturn给你推荐几本书： </h1>');
$('body').append('<dl />');
$(d).find('book').each(function(){
var $book = $(this);
var title = $book.attr("title");
var description = $book.find('description').text();
var imageurl = $book.attr('imageurl');
var html = '<dt> <img class="bookImage" alt="" src="' + imageurl + '" /> </dt>';
html += '<dd> <span class="loadingPic" alt="Loading" />';
html += '<p class="title">' + title + '</p>';
html += '<p> ' + description + '</p>' ;
html += '</dd>';
$('dl').append($(html));
$('.loadingPic').fadeOut(2000);
});
});
});2단계: 여기서는 원리와 작동 과정에 대해서만 이야기하겠습니다. 구문에 대해 너무 많이 논의하지 않을 것입니다. 구문에 대해 궁금한 점이 있으면 메시지를 남기거나 JQuery 관련 문서를 확인하십시오.
1행: HTML 문서가 준비되면(즉, html과 JavaScript가 모두 다운로드됨) JQuery의 $(document).ready 메서드와 내부 프로세스가 자동으로 트리거됩니다. 분명히 여기서는 $.get 메소드가 먼저 실행됩니다.
3행: $.get의 첫 번째 매개변수는 XML 파일의 상대 경로입니다(경로를 올바르게 입력해야 합니다. 여기서는 XML과 웹 페이지 파일을 동일한 폴더에 넣습니다). 두 번째 매개변수는 콜백 함수, 즉 콜백 함수입니다. 즉, 이 XML 파일의 내용은 get 메소드를 통해 요청되고 내부 데이터는 이 콜백 함수를 통해 조작됩니다. 콜백의 매개변수 d는 XML 콜백에서 반환된 모든 데이터를 나타냅니다. 이 매개변수 d를 사용하면 다음 내용을 진행할 수 있습니다.
라인 4: JavaScript를 통해 문서의 BODY에 4a249f0d628e2318394fd9b75b4636b1 태그를 동적으로 추가합니다. 이것은 관련이 없는 페이지의 전체 제목입니다.
라인 5: 또한 BODY에 5c69336ffbc20d23018e48b396cdd57a 태그를 동적으로 추가합니다. , 루프 아래에 콘텐츠 컨테이너를 포함하는 것으로 사용됩니다. (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 중국어 웹사이트의 기타 관련 기사를 참조하세요!