Complete example sharing of Ajax operations in JQuery

This article mainly introduces the complete example of Ajax operation in JQuery. It is very good and has reference value. Friends who need it can refer to it. I hope it can help everyone.

In Java software development, we can encapsulate the code in the background through various frameworks, such as SSH, etc., to facilitate our writing of Java code, for example, Struts, SpringMVC, from the front desk to the action The process is encapsulated and controlled, so that we only need to perform some simple configurations to achieve it; spring encapsulates the management of various objects and provides AOP programming methods, which greatly facilitates us; while hibernate and IBatis are JDBC code encapsulation does not require us to write repetitive and complicated JDBC code every time.

                                                                                                                                                                                                                                            doing some of the page effects, verification, etc. all done through the JavaScript language. However, it is just like our Java code, which is the most basic of the front-end language. jQuery encapsulates js code to facilitate the writing of our front-end code, and it also has a very big advantage in solving browser compatibility issues, which is one of the very important reasons why we use it.

                                                                                               Ajax (Asynchronous Javascript + XML) asynchronous refresh plays an incomparable role. In the past, writing Ajax operations always required us to perform several steps like JDBC code Necessary steps:

AJAX - the core XMLHttpRequest object, and JQuery also encapsulates Ajax asynchronous operations. Here are a few common methods. $.ajax, $.post, $.get, $.getJSON.

1. $.ajax, this is the most basic step for JQuery to encapsulate ajax. By using this function, all functions of asynchronous communication can be completed. In other words, we can perform asynchronous refresh operations through this method under any circumstances. But it has many parameters, which may be a little troublesome sometimes. Take a look at the commonly used parameters:       

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

$.ajax(configObj);//Called through the $.ajax function.

#, look at a practical example, see an example of asynchronous deletion:

<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, this function, this function, this function, this function In fact, $.ajax is further encapsulated, reducing parameters and simplifying operations, but the scope of application is smaller. $.post simplifies the data submission method and can only be submitted via POST. The server can only be accessed asynchronously, not synchronously, and error handling cannot be performed. Under these circumstances, we can use this function to facilitate our programming. Its main parameters, such as method, async, etc., are set by default and we cannot change them. Examples will not be introduced again.

url: Send request address.

data: Key/value parameters to be sent.

callback: callback function when sending successfully.

type: Return content format, xml, html, script, json, text,_default.

                                      $.get, like $.post, this function encapsulates the submitted data of the get method, and can only be used to solve the asynchronous refresh of the get submitted data. The usage method is the same as It’s pretty much the same thing above. No more demonstration here.

#, $ .getjson, this is further packaging, that is, operate the return data type as JSON. There are only three parameters in it that we need to set, which are very simple: url, [data], [callback].

In fact, once you know the $.ajax method, you can use everything else. They are all the same. It is actually very simple.

But there is another problem here, which is more troublesome, that is, what should we do if the amount of data on the page is relatively large? In the processing of regular forms, we use the framework Struts2 to automatically obtain encapsulation through domain-driven mode. So how to encapsulate through ajax? Here, JQuery has a plug-in, Jquery Form. By introducing this js file, we can imitate the form form to support the domain-driven mode of Struts2 and perform automatic data encapsulation. The usage is similar to $.ajax. Let’s take a look at the actual example. Here is a front-end code that saves the user:

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

This way we don’t have to process data anymore Encapsulation processing greatly simplifies our asynchronous refresh operations such as ajax operations. To sum up, the ajax operation in JQuery seems to be used a lot. It is still very similar to the form processing, but the functions implemented are different. Learning programming is actually about learning how to transfer and process data, how to obtain it from the front desk, transmit it to the server for corresponding processing, and then return it for relevant display. By implementing this process through some technologies, the development of the software is completed. It still feels like Very interesting.

related suggestion:

jquery method of splicing ajax json and string

Detailed explanation of ajaxSubmit in jQuery

JavaScript implements Ajax asynchronous request Detailed explanation of examples

The above is the detailed content of Complete example sharing of Ajax operations in JQuery. For more information, please follow other related articles on the PHP Chinese website!