jQuery-Studiennotizen – Ajax-Operation (1) – Daten Loading_jquery

HTML laden

Wir verwenden normalerweise die Methode zum Laden von HTML, um HTML-Fragmente zu laden und sie an der angegebenen Position einzufügen. Gehen Sie davon aus, dass die aktuelle Seite ist:

<div></div>
<button>load</button>

Der Inhalt der test.html-Datei im selben Verzeichnis ist:

<span>test</span>

Wir können die Load-Methode verwenden, um HTML zu laden und es an das Klickereignis der Schaltfläche zu binden:

 $('button').click(function() {
  $('div').load('test.html');
 });

Nach dem Klicken auf die Schaltfläche:

JSON wird geladen

JSON ist Javascript Object Notation, wörtlich übersetzt als Javascript Object Notation, sodass Daten problemlos dargestellt und übertragen werden können. Es legt fest, dass Schlüssel und Werte in doppelte Anführungszeichen gesetzt werden müssen und Funktionen illegale JSON-Werte sind.

{
  "name": "stephenlee", 
  "sex": "male"
}

Speichern Sie die oben genannten JSON-Daten in der Datei test.json. Wir können die getJSON-Methode verwenden, um JSON-Daten zu laden und sie auch an das Klickereignis der Schaltfläche zu binden:

 $('button').click(function() {
  $.getJSON('test.json');
 });

Da die getJSON-Methode als globales Objekt von jQuery definiert ist, müssen Sie $ verwenden, um diese Methode aufzurufen. Hier bezieht sich $ auf das globale jQuery-Objekt, nicht auf die einzelnen jQuery-Objekte, auf die $() verweist. Daher nennen wir die getJSON-Funktion auch eine globale Funktion.
Wir werden jedoch feststellen, dass der obige Code nur JSON-Daten erhält, aber keinen Effekt sieht. Hier können wir den zweiten Parameter der getJSON-Methode als Rückruffunktion verwenden, um den Effekt zu testen:

 $('button').click(function() {
  $.getJSON('test.json', function(data) {
   console.log(data);
   $.each(data, function(index, content) {
    console.log(content);
   })
  });
 });

Nachdem wir auf die Schaltfläche geklickt haben, werfen wir einen Blick auf die Ausgabe in der Konsole:

Der erste Parameter jeder Funktion hier kann ein Array oder Objekt empfangen, und der zweite Parameter ist die Wertrückruffunktion, die den aktuellen Index und den Wert des Arrays oder Objekts in jeder Schleife als Parameter verwendet.

JS wird geladen

Manchmal möchten wir nicht alle JS-Dateien laden, wenn die Seite zum ersten Mal geladen wird, sondern sie je nach Bedarf dynamisch laden. Angenommen, es gibt eine JS-Datei im aktuellen Verzeichnis mit einer einfachen Warnung:

$(function() {
 alert('test');//
})

Wir können die globale Funktion getScript verwenden, um die Datei zu laden und sie an das Klickereignis der Schaltfläche zu binden:

 $('button').click(function() {
  $.getScript('test.js');
 });

Nach dem Klicken auf die Schaltfläche wird die Datei test.js geladen und die Warnung erfolgreich ausgelöst.

XML laden

Der Ladevorgang von XML ähnelt dem von JSON, da die Rolle von XML-Dokumenten auch mit der Datenspeicherung zusammenhängt. Erstellen Sie im selben Verzeichnis eine text.xml-Datei mit dem Inhalt:

<person>
<name>stephenlee</name>
<sex>male</sex>
</person>

Sie können die get-Methode direkt zum Laden von XML-Dokumenten verwenden. Warum es wie eine Standardmethode aussieht, lässt sich aus dem vollständigen Namen von AJAX – Asynchronous JavaScript And XML – ersehen.
Binden Sie es auch an das Schaltflächenklickereignis:

 $('button').click(function() {
  $.get('test.xml', function(data) {
    console.log(data);
  });
 });

Sehen Sie sich die Konsole an und das Ergebnis ist:

Hier ist zu beachten, dass bei einem falschen Format im XML-Dokument zwar kein Fehler gemeldet wird, die Callback-Funktion jedoch nicht ausgeführt wird.