Die allgemeine Methode zur Verarbeitung von XML-Daten in jQuery_jquery

XML steht für Extensible Markup Language. Die Dateistruktur ähnelt HTML, der Unterschied ist jedoch auch offensichtlich, dass HTML nur definierte Tags wie Titel, Text, Spanne usw. verwenden kann XML außer Sie können alle HTML-Tags verwenden und Tags wie Person, Name, Geschlecht, Alter usw. auch nach Belieben anpassen. Die Tag-Attributnamen in XML können ebenfalls nach Belieben angepasst werden. Darüber hinaus gibt es offensichtliche Unterschiede in der Verwendung der beiden. HTML wird hauptsächlich zur Anzeige von Daten verwendet, während XML sich auf die Speicherung und Übertragung von Daten konzentriert. Zum Speichern von Mitarbeiterinformationen wird beispielsweise das folgende einfache XML-Dokument verwendet:

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

Im folgenden Artikel wird kurz vorgestellt, wie Sie mit jQuery eine XML-Datei laden und daraus die gewünschten Daten abrufen.
Bereiten Sie XML-Dokumente und Testdaten vor

Angenommen, wir möchten jetzt ein XML-Dokument erstellen, das Personalinformationen enthält. Das XML-Dokument sollte seinen Namen, sein Unternehmen, sein Firmenprofil und sein Firmenproduktprofil widerspiegeln. Dann können wir das XML im folgenden Stil gestalten:

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

Eine kurze Analyse dieser XML-Datei zeigt, dass die erste Zeile angibt, dass es sich bei diesem Dokument um ein XML-Dokument handelt und die Textkodierung utf-8 ist . Die zweite und letzte Zeile von „Persons“ ist das Stammelement des Dokuments, und jedes Person-Element stellt jede Person dar. Der Name wird im FullName-Attribut des Person-Elements gespeichert, das Corporation-Element wird zum Speichern des Namens des Unternehmens verwendet Das Element „Beschreibung“ wird zum Speichern des Unternehmensprofils verwendet. Das Element „Produkte“ wird zum Speichern eines Unternehmensproduktprofils verwendet. Bisher enthält das Dokument Informationen über drei Tycoons der IT-Branche: Bill Gates, Steve Jobs und Larry Page.
Analysieren Sie dieses XML-Dokument mit jQuery

Verwenden Sie zuerst die Methode $.get(), um die XML-Datei zu laden, verwenden Sie dann die Methode find(), um alle Person-Elemente zu finden, und verwenden Sie dann die Methode every() zum Durchlaufen. Der Code lautet wie folgt:

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

Erklären Sie diesen Code kurz. Da dieses XML-Dokument relativ einfach ist, ist dieser Code auch relativ kurz. Der erste Parameter der $.get()-Methode im Code ist die XML-Dateiadresse und der zweite Parameter ist ein Rückruf .-Funktion, der Parameter xmlData in der Callback-Funktion sind die Daten in der XML-Datei. In diesem Beispiel möchten wir, dass die Daten in XML in HTML als Tabelle angezeigt werden. Erstellen Sie daher zunächst eine Tabellenzeichenfolge „htmlData“.

Als nächstes verwenden Sie die find()-Methode, um alle Elemente mit dem Namen Person zu finden, da jedes Person-Element eine Person darstellt, und verwenden Sie dann die every()-Methode zum Durchlaufen und weisen Sie die durchquerten Elemente einer Variablen Person zu. Verwenden Sie die Methode Person.attr(), um das FullName-Attribut des Elements zu entfernen, bei dem es sich um den Namen der Person handelt, und verwenden Sie dann die Methode find(), um die Unterelemente Corporation, Description und Products zu finden, deren Textinhalt zurückzugeben und zu verwenden tr- und td-Tags, um sie in eine Tabellenzeile einzuschließen. Vervollständigen Sie abschließend die Tabellenzeichenfolge und fügen Sie die Tabelle zum Body-Tag hinzu.