ホームページ > 記事 > ウェブフロントエンド > JQueryはXMLファイルを読み取って表示します
JQueryはXMLファイルを読み取って表示します
- php中世界最好的语言オリジナル
- 2018-04-23 14:55:391955ブラウズ
今回は、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){
$('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: ここでは、原則と操作プロセスについてのみ説明します。 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はXMLファイルを読み取って表示しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。