Wie verwende ich Ajax konkret? Einführung in bestimmte Operationen mit Ajax

In diesem Artikel erfahren Sie hauptsächlich die spezifischen Verwendungsdetails von Ajax und es gibt Beispiele, die im Detail erklärt werden müssen. Lassen Sie uns diesen Artikel nun gemeinsam lesen

Bei der Java-Softwareentwicklung können wir den Code über verschiedene Frameworks im Hintergrund wie SSH usw. kapseln, um beispielsweise das Schreiben von Java-Code zu erleichtern Struts und SpringMVC kapseln und steuern den Prozess von der Rezeption 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 und AOP-Programmiermethoden bereitstellt, was sehr praktisch ist Für uns kapseln Hibernate und IBatis JDBC-Code und erfordern nicht, dass wir jedes Mal sich wiederholenden und komplizierten JDBC-Code schreiben.

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

Und jetzt, um den Bedürfnissen der Benutzer gerecht zu werden, hat Ajax (Asynchrones Javascript + XML)Asynchrone Aktualisierung eine unvergleichliche Rolle gespielt. In der Vergangenheit mussten wir beim Schreiben von Ajax-Operationen immer mehrere notwendige Schritte wie JDBC-Code ausführen:

AJAX – Kern-XMLHttpRequest-Objekt , und JQuery unterstützt auch asynchrone Ajax-Operationen Hier sind einige häufig verwendete Methoden. $.ajax, $.post, $.get, $.getJSON.

1. $.ajax, dies ist der grundlegendste Schritt für JQuery, um Ajax zu kapseln. Mit dieser Funktion können alle Funktionen der asynchronen Kommunikation abgeschlossen 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:                                                                                                                                                                     >

URL //Datenübermittlungspfad

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

<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>

Zweitens, $.post, ist diese Funktion tatsächlich eine weitere Kapselung von $.ajax, wodurch Parameter reduziert und Operationen vereinfacht werden, aber der Umfang 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]. (Wenn Sie mehr sehen möchten, besuchen Sie die Spalte „PHP-Chinese-Website“ AJAX-Entwicklungshandbuch , um mehr zu erfahren)

Tatsächlich weiß ich es Die $.ajax-Methode und andere können alle verwendet werden, sie sind alle gleich und 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>

     这样我们就不用再进行数据data的封装处理，大大简化了我们ajax的操作这样异步刷新的操作。综上为JQuery中ajax的操作，感觉使用多了，和form表单的处理还是非常相似的，只不过实现的功能不一样罢了。学习编程，其实就是学习对数据的流转处理，如何从前台获取，传输到服务器进行相应的处理，然后返回，进行相关的显示，把这个流程通过一些技术实现，就完成了软件的开发，感觉还是非常有意思的。

本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。

Das obige ist der detaillierte Inhalt vonWie verwende ich Ajax konkret? Einführung in bestimmte Operationen mit Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!