Vollständiges Beispiel für die gemeinsame Nutzung von Ajax-Operationen in JQuery

Dieser Artikel stellt hauptsächlich das vollständige Beispiel der Ajax-Operation in JQuery vor. Es ist sehr gut und hat Referenzwert. Ich hoffe, es kann jedem helfen.

Bei der Java-Softwareentwicklung können wir den Code im Hintergrund über verschiedene Frameworks wie SSH usw. kapseln, um das Schreiben von Java-Code zu erleichtern, z. B. Struts, SpringMVC usw Der Prozess an der Rezeption ist gekapselt und kontrolliert, sodass wir nur einige einfache Konfigurationen vornehmen müssen, um dies zu erreichen. Spring kapselt die Verwaltung verschiedener Objekte und bietet AOP-Programmierung, was uns erheblich erleichtert, während Ruhezustand und IBatis JDBC-Code sind Die Kapselung erfordert nicht, dass wir jedes Mal sich wiederholenden und komplizierten JDBC-Code schreiben müssen.

Was die Rezeption betrifft, verwenden wir alle für einige Seiteneffekte, Überprüfungen usw. die JavaScript-Sprache zur Vervollständigung, aber es ist auch wie unser Java-Code, es ist die grundlegendste Rezeptionssprache Und jQuery kapselt JS-Code, um das Schreiben unseres Front-End-Codes zu erleichtern. Außerdem hat es einen sehr großen Vorteil bei der Lösung von Browserkompatibilitätsproblemen, was einer der sehr wichtigen Gründe ist, warum wir es verwenden.

Um den Bedürfnissen der Benutzer gerecht zu werden, spielt die asynchrone Aktualisierung mit Ajax (Asynchronous Javascript + XML) in der Vergangenheit immer eine unvergleichliche Rolle, da wir beim Schreiben von Ajax-Operationen immer mehrere Schritte wie bei JDBC ausführen mussten Notwendige Schritte:

AJAX – das Kernobjekt XMLHttpRequest, und JQuery kapselt auch asynchrone Ajax-Operationen. $.ajax, $.post, $.get, $.getJSON.

1. $.ajax, dies ist der grundlegendste Schritt für JQuery zum Kapseln von Ajax. 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 //数据的提交方式：get和post
  url //数据的提交路劲
  async //是否支持异步刷新，默认是true
  data //需要提交的数据
  dataType //服务器返回数据的类型，例如xml,String,Json等
  success //请求成功后的回调函数
  error //请求失败后的回调函数
 }

$.ajax(configObj); // Wird über die Funktion $.ajax aufgerufen.

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

<span style="font-size:18px;">   // 删除 
    $.ajax({ 
     type : "POST", //提交方式 
     url : "${pageContext.request.contextPath}/org/doDelete.action",//路径 
     data : { 
      "org.id" : "${org.id}" 
     },//数据，这里使用的是Json格式进行传输 
     success : function(result) {//返回数据根据结果进行相应的处理 
      if ( result.success ) { 
       $("#tipMsg").text("删除数据成功"); 
       tree.deleteItem("${org.id}", true); 
      } else { 
       $("#tipMsg").text("删除数据失败"); 
      } 
     } 
    }); 
</span>

2. $.post, Diese Funktion ist eigentlich eine weitere Kapselung von $.ajax, wodurch Parameter reduziert und Operationen vereinfacht werden, der Anwendungsbereich ist jedoch geringer. $.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 Lösen der asynchronen Aktualisierung durch Senden von Daten mit get verwendet werden das Gleiche wie oben. Es ist so ziemlich das Gleiche. Keine Demonstration mehr hier.

Viertens $.getJSON, dies ist eine weitere Kapselung, das heißt, sie 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 das Seitendatenvolumen 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:

<span style="font-size:18px;"> $(function(){ 
  var options = { 
   beforeSubmit : function() {//处理以前需要做的功能 
    $("tipMsg").text("数据正在保存，请稍候..."); 
    $("#insertBtn").attr("disabled", true); 
   }, 
   success : function(result) {//返回成功以后需要的回调函数 
    if ( result.success ) { 
     $("#tipMsg").text("机构保存成功"); 
          //这里是对应的一棵树，后边会介绍到， 
     // 控制树形组件，增加新的节点 
     var tree = window.parent.treeFrame.tree; 
     tree.insertNewChild("${org.id}", result.id, result.name); 
    } else { 
     $("#tipMsg").text("机构保存失败"); 
    } 
    // 启用保存按钮 
    $("#insertBtn").attr("disabled", false); 
   }, 
   clearForm : true 
  }; 
  $(&#39;#orgForm&#39;).ajaxForm(options); //通过Jquery.Form中的ajaxForm方法进行提交 
 }); 
</span>

Auf diese Weise müssen wir die Daten nicht verarbeiten. Die Kapselungsverarbeitung von Daten vereinfacht unsere asynchronen Aktualisierungsvorgänge wie Ajax-Vorgänge erheblich. 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.

Verwandte Empfehlungen:

Wie JQuery den JSON und String von Ajax zusammenfügt

Ausführliche Erklärung von ajaxSubmit in jQuery

JavaScript implementiert die asynchrone Ajax-Anfrage. Detaillierte Erklärung von Beispielen

Das obige ist der detaillierte Inhalt vonVollständiges Beispiel für die gemeinsame Nutzung von Ajax-Operationen in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!