Eine Erklärung der Ajax-Kapselung in JQuery

Für einige Seiteneffekte, Überprüfungen usw. verwenden wir alle die JavaScript-Sprache, um sie zu vervollständigen, aber sie ähnelt auch unserem Java-Code, der grundlegendsten Front-End-Sprache, und jQuery ist eine bequeme Möglichkeit, js zu kapseln Code Das Schreiben unseres Front-End-Codes hat auch einen sehr großen Vorteil bei der Lösung von Browserkompatibilitätsproblemen, was einer der Gründe ist, warum es für uns sehr wichtig ist, ihn zu verwenden.

Um den Bedürfnissen der Benutzer gerecht zu werden, spielt die asynchrone Aktualisierung mit Ajax (Asynchronous JavaScript + XML) in der Vergangenheit immer die Durchführung mehrerer notwendiger Schritte wie JDBC-Code : AJAX – das Kernobjekt XMLHttpRequest, und jQuery kapselt auch asynchrone Ajax-Operationen. Hier sind einige gängige Methoden.

$.ajax, $.post, $.get, $.getJSON.

1. $.ajax, dies ist der grundlegendste Schritt für Jquery, um Ajax zu kapseln. Er kann durch abgeschlossen werden Verwenden dieser Funktion Alle Funktionen der asynchronen Kommunikation. Mit anderen Worten, wir können diese Methode unter allen Umständen verwenden, um asynchrone Aktualisierungsvorgänge durchzuführen. Aber es gibt viele Parameter, die manchmal etwas mühsam sein können. Schauen Sie sich die häufig verwendeten Parameter an:                                                                                                                                                                             

// Ob asynchrone Aktualisierung unterstützt werden soll, der Standardwert ist true

data // Daten, die übermittelt werden müssen

dataType // Der vom Server zurückgegebene Datentyp, z. B. XML, String, Json usw.

Erfolg //Rückruffunktion nach erfolgreicher Anfrage

Fehler //Rückruffunktion nach fehlgeschlagener Anfrage

}

$.ajax(configObj);//Aufruf über die $.ajax-Funktion.

OK, schauen wir uns ein praktisches Beispiel für asynchrones Löschen an:

"font-size:18px;">   

//Löschen 

1.      Typ: "POST" ,

   //Übermittlungsmethode
3. URL:

   "${pageContext. request.contextPath}/org/doDelete.action",//Pfad

4. Daten: {

                                                   "org.id"                        , hier verwendet Die Übertragung erfolgt in Json Format

5. Erfolg:

   Funktion(Ergebnis) {
//Die zurückgegebenen Daten werden entsprechend dem Ergebnis verarbeitet

6.                                                                                                   

   "#tipMsg").text(
"Daten erfolgreich löschen");

7. tree.deleteItem("${org.id}", true);

8.                                    

   else {

9.                                                                                              🎜>

                                                                                                              });                                        🎜> 🎜>

   Zweitens, $.post, diese Funktion ist eigentlich eine weitere Kapselung von $.ajax, wodurch Parameter reduziert und Operationen vereinfacht werden, aber der Anwendungsbereich ist kleiner. $.post vereinfacht die Datenübermittlungsmethode und kann nur per POST übermittelt werden. Der Zugriff auf den Server ist nur asynchron, nicht synchron möglich und eine Fehlerbehandlung ist nicht möglich. Unter diesen Umständen können wir diese Funktion verwenden, um unsere Programmierung zu erleichtern. Ihre Hauptparameter wie Methode, Asynchronität usw. sind standardmäßig festgelegt und können nicht geändert werden. Beispiele werden nicht noch einmal vorgestellt.

   URL: Anfrageadresse senden.

   Daten: Zu sendende Schlüssel-/Wertparameter.

   Rückruf: Rückruffunktion bei erfolgreichem Versand.

   Typ: Inhaltsformat zurückgeben, XML, HTML, Skript, JSON, Text,_default.

   3. $.get, wie $.post, diese Funktion kapselt die von der Get-Methode übermittelten Daten und kann nur zum Senden von Daten in get zur asynchronen Lösung verwendet werden Auffrischen In Bezug auf die Methode ähnelt die Verwendungsmethode der oben genannten. Keine Demonstration mehr hier.

   Viertens $.getJSON, dies ist eine weitere Kapselung, das heißt, es arbeitet mit dem Rückgabedatentyp von Json. Wir müssen nur drei Parameter festlegen, die sehr einfach sind: URL, [Daten], [Rückruf].

   Sobald Sie die $.ajax-Methode kennen, können Sie alles andere verwenden. Es ist eigentlich sehr einfach.

   Aber hier gibt es noch ein anderes Problem, das problematischer ist: Was sollen wir tun, wenn die Datenmenge auf der Seite relativ groß ist? Bei der Verarbeitung regulärer Formulare verwenden wir das Framework Struts2, um die Kapselung automatisch über den domänengesteuerten Modus zu erhalten. Wie kann man also über Ajax kapseln? Hier verfügt JQuery über ein Plug-in, Jquery Form. Durch die Einführung dieser js-Datei können wir das Formular nachahmen, um den domänengesteuerten Modus von Struts2 zu unterstützen und eine automatische Datenkapselung durchzuführen. Die Verwendung ähnelt $.ajax. Schauen wir uns das tatsächliche Beispiel an:

   1. "font-size: 18px;"> $(function(){

   2.  var options = { 

   3. beforeSubmit : function() {// Verarbeiten Sie die Funktionen, die vor

   4. ausgeführt werden müssen

      ).text("Daten werden gespeichert, bitte warten...");

   5.  attr(

      "deaktiviert" , true); success : function(result) {//Gibt die nach Erfolg benötigte Rückruffunktion zurück

                                                                                                     
   7. $(

      "#tipMsg").text("Organisation erfolgreich gespeichert"

   8.                                                                                                                                                                                                                                                                                                                                                    🎜>

   9. tree.insertNewChild("${org.id}", result.id, result.name);

   10. } else {

   11.                                                                                               🎜> }                                                                                                           🎜>           $("#insertBtn").attr(

       "disabled",
   false); 🎜>

   12. clearForm:

       true

   13. }; 🎜>'#orgForm').ajaxForm(options);

       //Senden über die ajaxForm-Methode in Jquery.Form

   14. }); > Es besteht keine Notwendigkeit, Daten zu kapseln, was unsere asynchronen Aktualisierungsvorgänge wie Ajax-Vorgänge erheblich vereinfacht. Zusammenfassend lässt sich sagen, dass die Ajax-Operation in JQuery häufig verwendet wird. Sie ist der Formularverarbeitung immer noch sehr ähnlich, die implementierten Funktionen sind jedoch unterschiedlich.

   16. von

Das obige ist der detaillierte Inhalt vonEine Erklärung der Ajax-Kapselung in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!