JQueryはXMLファイルを読み取って表示します

今回は、XML ファイルを読み取って表示するための JQuery について説明します。JQuery が XML ファイルを読み取って表示するための 注意事項 について、実際のケースを見てみましょう。

準備

始める前に、次の準備をする必要があります:

1. DEMO.html という名前の空の HTML ファイルを作成します (作成には Editplus を使用することをお勧めします)。 JQuery フレームワークの構文 (詳しくは後で説明します)
3. データを格納する XML ファイルを作成します。以下で、私がパッケージ化したファイルをダウンロードして表示することもできます。
4 .Aloading.gif 画像。この画像は、XML の読み取りの待機中に空の HTML ドキュメントに表示するために使用されます。
正式なスタート
ステップ 1: まず始めます。このdata.xmlの簡単な構造を見てみましょう。ここでそれを示します。データは「サターンがあなたに勧めるいくつかの本」なので、これは本の情報であり、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: ここでは、原則と操作プロセスについてのみ説明します。 JavaScript コードについて説明します。構文についてはあまり説明しません。構文について質問がある場合は、メッセージを残すか、JQuery 関連のドキュメントを参照してください。

1 行目: HTML ドキュメントが準備されると (つまり、html と JavaScript の両方がダウンロードされると)、JQuery の $(document).ready メソッドと内部のプロセスが自動的にトリガーされます。明らかに、ここでは $.get メソッドが最初に実行されます。

3 行目: $.get の最初のパラメーターは、XML ファイルの相対パスです (パスは正しく入力する必要があることに注意してください。ここでは、XML ファイルと Web ページ ファイルを同じフォルダーに置きます)。 2 番目のパラメーターはコールバック関数、つまり
callback function
です。つまり、この XML ファイルの内容は get メソッドを通じて要求され、内部のデータはこのコールバック関数を通じて操作されます。コールバックのパラメータ d は、XML コールバックから返されるすべてのデータを表します。このパラメータ d を使用して、次の内容に進むことができます。 4 行目: JavaScript を使用してドキュメントの BODY にタグ

を追加します。これはページ全体のタイトルです。これは無関係です。

5 行目: BODY にタグ

を追加します。として使用され、ループの下にコンテンツ コンテナが含まれます。 (行 20 が使用されます)
行 7: この行は、コールバック
関数のパラメーター
d が XML からのすべてのデータ コールバックを表すとすでに述べたので重要です。ここで、これらのデータを処理 (フィルター) する必要があります。フォーマット; 注意してください: ここでは、book タグ (タグ) が検索され、XML 内のデータエントリが完全に循環されるまで、それぞれの後の関数が実行されます (PHP の foreach 関数の関数に似ています)。 ) 9 行目: $(this) は実際にオブジェクトを作成します。目的は、操作を容易にするために d の現在の書籍情報オブジェクトをインスタンス化することです。これは $book です。
10 行目 -- 12 行目: の書籍名を取得します。現在のオブジェクト $book 、説明、サムネイル; (属性値とノード値を取得するための構文が異なることに注意してください) 14 行目から 18 行目: 出力用にブック情報をフォーマットします 20 行目: フォーマットされた情報を出力します。ドキュメント内の HTML 出力として。
22 行目: 現在の情報が XML から読み取られていることをユーザーに伝えるために、画像は 2000 ミリ秒 (2 秒) 後に消えます。
ステップ 3: この時点で作業は完了です。 JQuery の開発や遭遇した問題について話し合うために、どなたでもメッセージを残してください。お気軽にアドバイスをください。また、ダウンロードしたフォルダーはWEB環境(IISまたは
仮想ホスト
)で実行してください。直接クリックして実行しないでください。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:

Jquery+LigerUI ファイルアップロード手順の詳細な説明

jquery js ファイルの動的読み込みの詳細な説明

以上がJQueryはXMLファイルを読み取って表示しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。