Heim > Web-Frontend > js-Tutorial > Verwenden von JQuery zum Betreiben von Ajax (mit Groß-/Kleinschreibung)

Verwenden von JQuery zum Betreiben von Ajax (mit Groß-/Kleinschreibung)

php中世界最好的语言
Freigeben: 2018-04-23 15:33:16
Original
2023 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Verwendung von JQuery zum Betrieb von Ajax vorstellen (mit Groß-/Kleinschreibung). Was sind die Vorsichtsmaßnahmen für die Verwendung von JQuery zum Betrieb von Ajax?

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. Beispielsweise können Struts und SpringMVC den Prozess ausführen Die Kapselungssteuerung ermöglicht es uns, sie mit nur wenigen einfachen Konfigurationen zu implementieren. Spring kapselt die Verwaltung verschiedener Objekte und stellt AOP-Programmiermethoden bereit, was uns die Implementierung von JDBC-Code erheblich erleichtert jedes Mal sich wiederholenden und komplizierten JDBC-Code zu schreiben.

Was das Frontend betrifft, verwenden wir für einige Seiteneffekte, Überprüfung usw. die JavaScript-Sprache, um es zu vervollständigen, aber es ist auch wie unser Java-Code, es ist das Die grundlegendste Front-End-Sprache und jQuery kapseln den JS-Code, um das Schreiben unseres Front-End-Codes zu erleichtern. Außerdem bietet sie einen großen Vorteil bei der Lösung von Browserkompatibilitätsproblemen, was einer der wichtigsten Gründe ist, warum wir sie verwenden.

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

AJAX – 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. Mit dieser Funktion können alle Funktionen der asynchronen Kommunikation abgeschlossen werden. 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:

var configObj = {
  method //数据的提交方式:get和post
  url //数据的提交路劲
  async //是否支持异步刷新,默认是true
  data //需要提交的数据
  dataType //服务器返回数据的类型,例如xml,String,Json等
  success //请求成功后的回调函数
  error //请求失败后的回调函数
 }
Nach dem Login kopieren

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

Okay, schauen Sie sich ein tatsächliches Beispiel an und sehen Sie sich 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>
Nach dem Login kopieren
Zweitens, $ Diese Funktion ist tatsächlich eine weitere weitere Reduzierung der Kapselung die Parameter und vereinfacht die Bedienung, allerdings ist der Anwendungsbereich kleiner. $.post vereinfacht die Datenübermittlungsmethode und kann nur per POST übermittelt werden. Auf den Server kann nur asynchron, nicht synchron zugegriffen werden und eine

Fehlerbehandlung kann nicht durchgeführt werden. 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 übermittelten Daten der get-Methode. Sie kann nur zum Abrufen übermittelter Daten zur Lösung der asynchronen Aktualisierung verwendet werden fast das Gleiche wie oben. Keine Demonstration mehr hier.

Viertens $.getJSON, dies ist eine weitere Kapselung, das heißt, der zurückgegebene

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

Form 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. Hier ist ein Front-End-Code, der den Benutzer speichert:

<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 
  }; 
  $('#orgForm').ajaxForm(options); //通过Jquery.Form中的ajaxForm方法进行提交 
 }); 
</span>
Nach dem Login kopieren

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

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

jQuery内init构造器使用详解

jQuery动态操作div步骤详解

Das obige ist der detaillierte Inhalt vonVerwenden von JQuery zum Betreiben von Ajax (mit Groß-/Kleinschreibung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
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