Kaedah umum memproses data XML dalam jQuery_jquery

XML adalah singkatan dari Extensible Markup Language Struktur failnya serupa dengan HTML, tetapi perbezaannya juga jelas HTML hanya boleh menggunakan teg yang ditentukan, seperti tajuk, kandungan, span, dll. Jenis teg adalah terhad, tetapi. XML kecuali Anda boleh menggunakan semua teg HTML, dan anda juga boleh menyesuaikan teg sesuka hati, seperti orang, nama, jantina, umur, dsb., dan nama atribut teg dalam XML juga boleh disesuaikan mengikut kehendak. Di samping itu, terdapat perbezaan yang jelas dalam penggunaan kedua-dua HTML digunakan terutamanya untuk memaparkan data, manakala XML memfokuskan pada penyimpanan dan penghantaran data. Sebagai contoh, dokumen XML mudah berikut digunakan untuk menyimpan maklumat pekerja:

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

Artikel berikut secara ringkas memperkenalkan cara menggunakan jQuery untuk memuatkan fail XML dan mendapatkan data yang anda inginkan daripadanya.
Sediakan dokumen XML dan data ujian

Andaikan kita kini ingin membina dokumen XML yang mengandungi maklumat kakitangan Dokumen XML harus mencerminkan nama, syarikat, profil syarikat dan profil produk syarikatnya, kemudian kita boleh mereka bentuk XML ke dalam gaya berikut:

<&#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>

Analisis ringkas fail XML ini menunjukkan bahawa baris pertama mengisytiharkan bahawa dokumen ini ialah dokumen XML dan pengekodan teks ialah utf-8 . Baris kedua dan terakhir Orang ialah elemen akar dokumen, dan setiap elemen Orang mewakili setiap orang Nama itu disimpan dalam atribut Nama Penuh bagi elemen Orang, elemen Perbadanan digunakan untuk menyimpan nama syarikat dan. elemen Penerangan digunakan untuk menyimpan profil syarikat Elemen Produk digunakan untuk menyimpan profil produk syarikat. Setakat ini, dokumen itu mengandungi maklumat tentang tiga taikun industri IT: Bill Gates, Steve Jobs dan Larry Page.
Parsing dokumen XML ini dengan jQuery

Mula-mula gunakan kaedah $.get() untuk memuatkan fail XML, kemudian gunakan kaedah find() untuk mencari semua elemen Person, dan kemudian gunakan kaedah each() untuk melintasi kodnya seperti berikut:

<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>

Terangkan secara ringkas kod ini Memandangkan dokumen XML ini agak mudah, kod ini juga agak pendek Parameter pertama kaedah $.get() dalam kod ialah alamat fail XML, dan parameter kedua ialah panggilan balik ., parameter xmlData dalam fungsi panggil balik ialah data dalam fail XML. Dalam contoh ini, kami berhasrat data dalam XML untuk dipaparkan dalam HTML sebagai jadual, jadi mula-mula bina rentetan jadual htmlData dahulu.

Seterusnya, gunakan kaedah find() untuk mencari semua elemen bernama Person, kerana setiap elemen Person mewakili seseorang, dan kemudian gunakan kaedah each() untuk melintasi dan menetapkan elemen yang dilalui kepada Person yang berubah-ubah. Gunakan kaedah Person.attr() untuk mengalih keluar atribut Nama Penuh bagi elemen, iaitu nama orang itu, dan kemudian gunakan kaedah find() untuk mencari sub-elemen Perbadanan, Penerangan dan Produk serta mengembalikan kandungan teksnya dan gunakan teg tr dan td untuk membungkusnya di dalam barisan jadual. Akhir sekali lengkapkan rentetan jadual dan tambahkan jadual pada teg badan.