Parsen von jQuery-Ajax-Operationen (1) Laden von Daten

Ajax Generell können Daten vom Server oder Client geladen werden, ohne dass die Seite aktualisiert werden muss. Natürlich sind die Formate dieser Daten vielfältig.

HTML laden

Wir verwenden normalerweise die Methode zum Laden von HTML, um das HTML-Fragment zu laden und es an der angegebenen Position einzufügen:

<p></p>
<button>load</button>

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

<span>test</span>

Wir können die load-Methode zum Laden von HTML verwenden und binden Sie es an den Klick auf die Schaltfläche Ereignis am:

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

Nach dem Klicken auf die Schaltfläche:

Laden von JSON

JSON d. h.Javascript<a href="http://www.php.cn/wiki/48.html" target="_blank">Javascript</a> Object Notation Objektnotation, Wörtlich übersetzt als Javascript-Objektnotation. Daher können Daten problemlos dargestellt und übertragen werden. Es legt fest, dass sowohl Schlüssel als auch 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 test.json-Datei. Wir können die getJSON-Methode verwenden, um die 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 , daher muss hier jquery verwendet werden, um diese Methode aufzurufen. Hier bezieht sich $ auf das globale $-Objekt, nicht auf die einzelnen jQuery-Objekte, auf die sich $() bezieht. Daher nennen wir die jQuery-Funktion auch die getJSONglobale Funktion . Aber wir werden feststellen, dass der obige Code nur die
-Daten erhält, aber keine Auswirkung hat. Hier können wir den zweiten Parameter der JSON-Methode als getJSONRückruffunktion verwenden Testen Sie den Effekt:

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

Nachdem Sie auf die Schaltfläche geklickt haben, werfen wir einen Blick auf die Ausgabe innerhalb von

: console

Der erste Parameter des Die

-Funktion kann hier „Ein Array oder Objekt empfangen“ sein, und der zweite Parameter ist die Wertrückruffunktion, die den aktuellen each-Index und den Wert des Arrays oder Objekts in jeder Schleife als Parameter verwendet.

JS wird geladen

Manchmal möchten wir nicht alle

-Dateien laden, wenn die Seite zum ersten Mal geladen wird, sondern sie basierend auf der Nachfrage dynamisch laden > Datei im aktuellen Verzeichnis. Der Inhalt ist ein einfaches JS: JSalert

Wir können die globale Funktion

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

verwenden, um die Datei zu laden und sie auch an das Klickereignis zu binden der Schaltfläche:

getScript

Nach dem Klicken auf die Schaltfläche wird die Datei

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

geladen und

erfolgreich ausgelöst. test.jsalertXML laden

Der Ladevorgang von

ähnelt dem von

, da die Rolle des XML-Dokuments auch mit der Datenspeicherung zusammenhängt Der Inhalt lautet: JSONXMLtext.xmlDas Laden des

-Dokuments kann direkt mit der

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

-Methode erfolgen. Warum es wie eine Standardmethode aussieht, ist aus dem vollständigen Namen von

ersichtlich – XML. getVerknüpfen Sie es auf ähnliche Weise mit dem Schaltflächenklickereignis: AJAXAsynchronous JavaScript And XML
Anzeigen

Das Ergebnis ist:

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

console

Hier müssen Sie aufpassen , wenn Wenn im Dokument ein Formatfehler vorliegt, wird zwar kein Fehler gemeldet, die Rückruffunktion wird jedoch nicht ausgeführt.

Das obige ist der detaillierte Inhalt vonParsen von jQuery-Ajax-Operationen (1) Laden von Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!