Wie Abrufen Ergebnisse von Ajax-Aufrufe mit javascript

Es ist Zeit, ein paar javascript-Anwendungen zu erstellen, um zu sehen, was jQuery für Sie tun können, wenn Sie die Ergebnisse von AJAX Anrufe sind abzurufen. Obwohl Ihre realen Situationen komplexer sein wird, wird der Prozess geht gleich sein.

Wie mit der Standardausgabe zu arbeiten

In diesem Beispiel wird die DoMath.php Skript Mathematik zu führen und nur das Ergebnis Feld eines Formulars auf einer Seite ändern. Sie müssen den Server-Setup verwenden Sie dieses Beispiel Arbeit zu machen, weil der Server die PHP-Skript ausführt, und dann gibt das Ergebnis. Mit jQuery macht den Prozess mit AJAX wesentlich einfacher zu arbeiten. Der folgende Code zeigt das Formular für diese Aufgabe eingesetzt.

Das Beispiel verwendet Standard Kontrollen für die Dateneingabe. Beachten Sie, dass Sie die definieren müssen Name Attribute für diese Kontrollen, oder die jQuery .serialisiert () Methode wird nicht funktionieren. Es ist eine gute Idee, um die Kontrollen Standardwerte zuweisen. Der Ausgang ist ein einfacher.

Die Anwendung führt seine Aufgabe, wenn der Benutzer klickt die Zahlen stimmen, die eine ist steuern. Dieser Ansatz bietet eine Alternative zur Verwendung eines Artknopf einreichen. Allerdings funktioniert entweder Ansatz gleichermaßen gut. Der Vorteil dieses Ansatzes ist, dass Sie eine benannte Funktion verwenden können, PerformAdd (), Handhabung der klicken Event. Der folgende Code zeigt, wie PerformAdd () macht seine Arbeit:

Funktion PerformAdd () {$ ( "#result") .load ( "http: //localhost/DoMath.php", $ ( "#DataEntry") .serialize ()) -}

Das Beispiel stellt die Ausgabe in einer mit einem Ich würde von Ergebnis. Der Zugriff auf diese durch seine Kennung und Call Belastung() sie mit Informationen aus der gewünschten Quelle zu füllen. Sie stellen die Position der Quelle, das ist DoMath.php.

Das PHP-Skript erfordert Eingangsdaten, die Sie als zweites Argument hinzufügen. Um die Daten zu erhalten, greifen Sie den Tag, das eine Kennung hat von Dataentry, und rufen Sie serialisiert (), die serialisiert jedes Steuerelement, das eine hat Name Attribut zugewiesen. Wenn Sie die Standardwerte verwenden, ist die serialisierten Daten val1 = 1val2 = 2. Zusammengenommen ist die vollständige URL http: //localhost/DoMath.php val1 = 1val2 = 2.

bild0.jpg

Die Vorteile von JSON

Arbeiten mit XML bietet eine plattformübergreifende, Cross-Browser-Lösung zum Speichern von Daten, die auch mit fast jeder Programmiersprache auf dem Planeten funktioniert. Es ist wirklich nicht möglich, als XML mehr Generika zu erhalten. XML kann schwierig sein, in eine Form zu analysieren, die der Computer verstehen kann. Folglich sah Entwickler für einen einfacheren Weg, um komplexe Daten zu speichern. javascript Object Notation (JSON) ist eine der neuen Lösungen.

Wie XML, JSON arbeitet mit jeder Plattform und mit jedem Browser. Mit jQuery macht mit JSON einfach zu arbeiten. Interessanterweise bietet PHP die Funktionen komplex zu übersetzen erforderlich PHP-Daten in JSON-Format.

Wie die JSON-Daten zu erstellen

Wie der Name schon sagt, setzt JSON auf javascript, Informationen zu speichern Objekte. Sie verwenden eigentlich Objektliterale Daten zu speichern.

In diesem Beispiel speichert die JSON-Daten auf der Festplatte in einer Datei.

{ "Benutzer": [{ "Name": "George Smith", "Nummer": 28, "Geburtstag": "/ Date (377.244.000.000) /"}, { "Name": "Amy Jones", "Nummer": 41, "Geburtstag": "/ Date (414.914.400.000) /"}, { "Name": "Sammy Wang", "Nummer": 33, "Geburtstag": "/ Date (-147.380.400.000) /"}]}

Die Daten bestehen aus einer Gruppe von Benutzern. Es gibt drei Benutzer in die Datei. Jeder Benutzereintrag hat die gleichen Felder, die mit ihm verbunden: Name, Nummer, und Geburtstag. Beachten Sie, dass Strings in Anführungszeichen erscheinen. Die Zahlen werden ohne Anführungszeichen. JSON ist eigentlich keine Unterstützung für Standard-Objekttypen zur Verfügung stellen, so dass dieses Beispiel wird einer der Typen, die Sie häufig sehen.

Wenn diese Datei einen Booleschen Wert enthalten ist, würde es scheinen, als wahr oder falsch ohne Anführungszeichen. Insgesamt unterstützt JSON diese Datentypen:

  • Schnur

  • Nummer

  • Boolean

  • Null

Darüber hinaus JSON-Dateien unterstützen zwei Strukturtypen: Objektliteral und Array. Dieses Beispiel zeigt beide Strukturtypen für Sie, damit Sie wissen, wie sie in javascript zu behandeln jQuery verwenden.

Wie die JSON-Daten am Bildschirm anzuzeigen

Das Formular für dieses Beispiel, trägt die Überschrift und ein steuern. Wenn der Benutzer auf die Schaltfläche klickt, ruft es Viewdata, die in den folgenden Beispielcode dargestellt ist.

Erhalten Funktion Viewdata () {// die Daten von der Festplatte $ getJSON ( "Test.json", Funktion (Daten) {// Erstellen Sie ein Array die data.var Artikel zu halten = [] -.. // Die Daten Parse durch Blick auf // jeder Eintrag in den Benutzer-Objekt. $. jede (data.Users, Funktion (Schlüssel, Wert) {items.push ( "
  • "+ Value.Name +"
    "+ Value.Number +"
    "+ (New Date (parseInt (value.Birthday.substr (6)))). ToDateString () +"
    • ") -}) - // Das Ergebnis in einer ungeordneten Liste Legen Sie $ ( '.
      '{Html: items.join ( "")}.) AppendTo (' body ') -}) -}

    Das Beispiel beginnt mit dem Aufruf .getJSON (), die Lasten Test.json aus dem Laufwerk und legt den Inhalt in Daten. Die anonyme Funktion akzeptiert Daten als Eingabe. Um die Ausgabe für dieses Beispiel zu erstellen, erstellt der Code ein leeres Array, Artikel. Mit Artikel vereinfacht den Code.

    Der nächste Schritt ist jede der Benutzereingaben in das zu verarbeiten, Benutzer Array gefunden in Test.json. Die Code-Anrufe .jeder() und übergibt sie data.Users, so dass die Schleife wird jede der Objektliterale verarbeiten sie enthält. Die anonyme Funktion erhält ein Schlüssel und Wert Paar für jeden der Benutzereingaben.

    Zu jeder der Schlüssel / Wert-Paare für die wörtliche Einträge Objekt zugreifen, interagieren Sie mit den entsprechenden Eigenschaften: Name, Nummer, und Geburtstag. Verarbeitung Name und Nummer unkompliziert - sie einfach an den Ausgang passieren, wie ist.

    Um die seltsam aussehende .NET Datum verarbeiten, müssen Sie den Textteil aus dem numerischen Teil des Strings trennen und drehen dann diesen Wert in eine Ganzzahl, die die Anzahl der Millisekunden seit dem 1. Januar enthält 1970.

    Wenn Sie ein Datum vor 1. Januar 1970 zur Verfügung stellen möchten, verwenden Sie eine negative Zahl von Millisekunden. Die Anzahl der Millisekunden wird verwendet, um eine zu erstellen new Date () Objekt. Die Code-Anrufe toDateString () , die Ausgabe besser aussehende.

    An diesem Punkt, Artikel enthält drei Array-Elemente, von denen jede enthält Fakten über die Benutzer ein Listenelement-Tag ist. Der Code erstellt eine neue ungeordnete Liste Tag und Orte Artikel in ihm durch den Aufruf beitreten(). Die resultierende Liste wird dem aktuellen Dokument hinzugefügt durch die Verwendung von Anhängen() Verfahren.

    image1.jpg

    Ähnliche

    Menü