Heim > Web-Frontend > js-Tutorial > Zusammenfassung der Ajax-Syntaxbeispiele in Jquery

Zusammenfassung der Ajax-Syntaxbeispiele in Jquery

伊谢尔伦
Freigeben: 2017-06-16 10:32:02
Original
1711 Leute haben es durchsucht

Bei der Java-Softwareentwicklung können wir im Hintergrund den Code durch verschiedene Frameworks wie SSH usw. kapseln. , was uns das Schreiben von Java-Code erleichtert. Struts und SpringMVC kapseln und steuern den Prozess vom Front Desk bis zur Aktion, sodass wir nur einige einfache Konfigurationen durchführen müssen, um dies zu erreichen, während Spring die Verwaltung verschiedener Objekte kapselt Es bietet eine AOP-Programmiermethode, die uns die Kapselung von JDBC-Code im Ruhezustand und IBatis erheblich erleichtert, und wir müssen nicht jedes Mal sich wiederholenden und komplizierten JDBC-Code schreiben.

An der Rezeption verwenden wir alle für einige Seiteneffekte, Überprüfungen usw. die JavaScript-Sprache, um es zu vervollständigen, aber es ist auch so Unser Java-Code ist derselbe, er ist die grundlegendste Front-End-Sprache, und jQuery kapselt den JS-Code, um das Schreiben unseres Front-End-Codes zu erleichtern, und hat auch einen sehr großen Vorteil bei der Lösung der Browserkompatibilität Problem, weshalb wir es verwenden Einer der sehr wichtigen Gründe.

Und jetzt, um den Bedürfnissen der Benutzer gerecht zu werden, spielt Ajax (Asynchrones Javascript + XML) Asynchrone Aktualisierung beim Schreiben von Ajax eine unvergleichliche Rolle Operationen, es war immer Wir müssen mehrere notwendige Schritte wie JDBC-Code ausführen:

AJAX – das Kernobjekt XMLHttpRequest, und JQuery kapselt auch asynchrone Ajax-Operationen. Hier sind einige häufig verwendete Methoden. $.post, $.ajax, $.get, $.getJSON.

Zusammenfassung der Ajax-Syntaxbeispiele in Jquery

1. $.post, diese Funktion kapselt $.ajax tatsächlich weiter und reduziert Parameter, die den Vorgang vereinfachen, aber die 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.

2. $.ajax, dies ist der grundlegendste Schritt für JQuery, um Ajax zu kapseln. Mit dieser Funktion können alle Funktionen der asynchronen Kommunikation ausgeführt werden. Mit anderen Worten, wir können mit dieser Methode unter allen Umständen asynchrone Aktualisierungsvorgänge durchführen. Aber es gibt viele Parameter, die manchmal etwas mühsam sein können. Schauen Sie sich die häufig verwendeten Parameter an:

var configObj = {

method //Datenübermittlungsmethode: abrufen und posten

URL //Datenübermittlungspfad

asynchron //Ob asynchrone Aktualisierung unterstützt wird, 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 //Die Rückruffunktion nach einer erfolgreichen Anfrage

Fehler //Die Rückruffunktion nach einer fehlgeschlagenen Anfrage

}

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

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

[javascript]

  1. "font-size:18px;"> >

  2. $.ajax({

  3. Typ:

    "POST" , / /Einreichungsmethode

  4. URL: "${pageContext.request.contextPath}/org/doDelete.action",//Path

  5. Daten: {

  6. "org.id" : "${ org.id}" 

  7.                                                                                                                   🎜>

    Erfolg:
  8. Funktion
  9. (Ergebnis) {

    //Die zurückgegebenen Daten werden entsprechend dem Ergebnis verarbeitet <.>                                                                                                                     $(

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

    );

  12. ${org.id}"
  13. ,

    true); $(

    "#tipMsg"
  14. ).text(
  15. "Löschen von Daten fehlgeschlagen"

    );

  16.                                                                                            

  17. });

  18. Drei, $.get, wie $.post, diese Funktion kapselt die übermittelten Daten der Get-Methode und kann nur zur Lösung der asynchronen Aktualisierung mithilfe der Get-Submit-Data-Methode verwendet werden ist das Gleiche wie oben. Keine Demonstration mehr hier.

  19. 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].

  20. 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: 🎜>

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

                                                                                                                                            ) {//Prozessfunktionen, die zuvor ausgeführt werden mussten

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

  • $("#insertBtn").attr("disabled", true);

  • },

  • Erfolg: Funktion(Ergebnis ). 🎜> $("#tipMsg").text(

    "Organisation erfolgreich gespeichert"
  • );
  •                                                                                                                                                         🎜> //Hier ist der entsprechende Baum, der später vorgestellt wird,

  •                                                      > var Baum = Fenster. parent.treeFrame.tree;

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

  • sg "). Text (" Organisation speichern ");> deaktiviert"

    ,
  • false
  • ); :

    wahr };

  • $('#orgForm').ajaxForm(options);

    //Über die ajaxForm-Methode in Jquery.Form Submit
  • });

  • Auf diese Weise müssen wir die Daten nicht mehr kapseln, was unseren Ajax-Vorgang und den asynchronen Aktualisierungsvorgang 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. Beim Erlernen der Programmierung geht es eigentlich darum, zu lernen, wie man Daten überträgt und verarbeitet, wie man sie von der Rezeption erhält, sie zur entsprechenden Verarbeitung an den Server überträgt und sie dann zur relevanten Anzeige zurückgibt. Durch die Implementierung dieses Prozesses durch einige Technologien wird die Entwicklung von Die Software ist fertig. Es fühlt sich immer noch sehr interessant an.


    Das obige ist der detaillierte Inhalt vonZusammenfassung der Ajax-Syntaxbeispiele in Jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage