jQuery_jquery で XML データを処理する一般的な方法

XML は Extensible Markup Language の略で、ファイル構造は HTML に似ていますが、HTML ではタイトル、ボディ、スパンなどの定義されたタグのみを使用できます。タグの種類は限られています。 XML 以外のすべての HTML タグが使用でき、人物、名前、性別、年齢などのタグを自由にカスタマイズすることもでき、XML のタグ属性名も自由にカスタマイズできます。さらに、HTML は主にデータの表示に使用されますが、XML はデータの保存と送信に重点を置いています。たとえば、次の単純な XML ドキュメントは従業員情報を保存するために使用されます:

<员工>
 <姓名>麻花疼</姓名>
 <性别>男</性别>
 <年龄>40</年龄>
 <职位>疼逊CEO</职位>
</员工>

次の記事では、jQuery を使用して XML ファイルをロードし、そこから必要なデータを取得する方法を簡単に紹介します。
XMLドキュメントとテストデータを準備します

ここで、人事情報を含む XML ドキュメントを作成するとします。XML ドキュメントには、彼の名前、会社、会社概要、および会社の製品プロフィールが反映されている必要があります。次に、XML を次のスタイルに設計できます。

<&#63;xml version="1.0" encoding="utf-8" &#63;>
<Persons>
 <Person FullName="Bill Gates">
 <Corporation>Microsoft</Corporation>
 <Description>The largest software company</Description>
 <Products>Windows series OS, SQL Server Database, XBox 360...</Products>
 </Person>

 <Person FullName="Jobs">
 <Corporation>Apple</Corporation>
 <Description>The famous software company</Description>
 <Products>Macintosh, iPhone, iPod, iPad...</Products>
 </Person>

 <Person FullName="Larry Page">
 <Corporation>Google</Corporation>
 <Description>the largest search engine</Description>
 <Products>Google search, Google Adsense, Gmail...</Products>
 </Person>
</Persons>

この XML ファイルを簡単に分析すると、最初の行 この XML ドキュメントを jQuery
で解析します

最初に $.get() メソッドを使用して XML ファイルをロードし、次に find() メソッドを使用してすべての Person 要素を検索し、次に each() メソッドを使用して走査します。コードは次のとおりです。 >

<script type="text/javascript">
jQuery(document).ready(function() {
 /* 先用 $.get 方法载入 XML 文件 */
 $.get("EmployeesInformation.xml", function(xmlData) {
 /* 我们要讲得到的数据放入一个表格里面，这里定义一个表格字符窜 */
 var htmlData = "<table border='1'>";

 /* 找到 Person 元素，然后用 each 方法进行遍历 */
 $(xmlData).find("Person").each(function() {
  var Person = $(this); /* 将当前元素复制给 Person */
  var FullName = Person.attr("FullName"); /* 获取 Person 的 FullName 属性 */
  var Corporation = Person.find("Corporation").text(); /* 获取 Person 中子元素 Corporation 的值 */
  var Description = Person.find("Description").text(); /* 获取 Person 中子元素 Description 的值 */
  var Products = Person.find("Products").text(); /* 获取 Person 中子元素 Products 的值 */

  /* 将得到的数据，放到表格的一行中 */
  htmlData += "<tr>";
  htmlData += " <td>" + FullName + "</td>";
  htmlData += " <td>" + Corporation + "</td>";
  htmlData += " <td>" + Description + "</td>";
  htmlData += " <td>" + Products + "</td>";
  htmlData += "</tr>";
 });
 
 //完成表格字符窜
 htmlData += "</table>";
 //将表格放到 body 中
 $("body").append(htmlData);
 });
});
</script>

このコードを簡単に説明します。この XML ドキュメントは比較的単純であるため、コード内の $.get() メソッドの最初のパラメータは XML ファイル アドレスであり、2 番目のパラメータはコールバックです。 . 関数の場合、コールバック関数のパラメータ xmlData は XML ファイル内のデータです。この例では、XML のデータを HTML にテーブルとして表示することを目的としているため、最初にテーブル文字列 htmlData を構築します。

次に、 find() メソッドを使用して、 Person という名前のすべての要素を検索します。これは、各 Person 要素が人を表すためです。次に、 each() メソッドを使用してトラバースし、トラバースした要素を変数 Person に割り当てます。 Person.attr() メソッドを使用して要素の FullName 属性 (個人の名前) を削除し、次に find() メソッドを使用してそのサブ要素である Corporation、Description、および Products を検索し、そのテキスト コンテンツを返します。 tr タグと td タグを使用して、テーブルの行内にそれらをラップします。最後にテーブル文字列を完成させ、テーブルを body タグに追加します。