Detailed explanation of Ajax operation cases in JQuery

This time I will bring you a detailed explanation of the use of Ajax operations in JQuery. What are the precautions for using Ajax operations in JQuery? The following is a practical case, let's take a look.

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 and SpringMVC can carry out the process from the front desk to the action. Encapsulation control allows us to implement it with only some simple configurations; spring encapsulates the management of various objects and provides AOP programming methods, which greatly facilitates us; while hibernate and IBatis implement JDBC code Encapsulation does not require us to write repetitive and complicated JDBC code every time.

                                                                                                                                                                                                                                                                                                    # , and 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.

But now, in order to meet the needs of users, Ajax (Asynchronous Javascript XML) asynchronous refresh plays an incomparable role. In the past, writing Ajax operations always required us to perform several necessary steps like JDBC code. ：

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

, $. Post, this function is actually a further packaging of $ .ajax , reducing the parameters and simplifying the operation, 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

is not possible. 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.

                                                                                                                                                                                                                                                                                but $. almost. No more demonstration here.

Four, $ .Getjson, this is further packaging, that is, to return the

data type

for 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

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

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

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

推荐阅读：

$.ajax()使用详解

使用Jquery获取iframe页面中Dom元素

The above is the detailed content of Detailed explanation of Ajax operation cases in JQuery. For more information, please follow other related articles on the PHP Chinese website!