How to use ajax specifically? Introduction to specific operations using ajax

This article mainly tells you the specific usage details of ajax, and there are examples to explain in detail. Now let us read this article together

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

As for the front desk, for some page effects, verification, etc., we all use JavaScript language to complete it, but it is also like our Java code, it is the most basic front desk language , 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.

And now in order to meet the needs of users, Ajax (Asynchronous Javascript XML)Asynchronous refresh plays an incomparable role. Previously written Ajax operations always require us to perform several necessary steps like JDBC code:

AJAX - core XMLHttpRequest object, and JQuery is also asynchronous to Ajax The operation is encapsulated. Here are some commonly used 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 = {

                                                                         

# url //Data submission path

async //Whether asynchronous refresh is supported, the default is true

data //Data that needs to be submitted

dataType //The type of data returned by the server, such as xml, String, Json, etc.

success //The callback function after the request is successful

error //The callback function after the request fails

}

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

                                                                                                                    Let’s look at a practical example, let’s look at 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>

Second, $.post, this function is actually a further encapsulation of $.ajax, reducing parameters and simplifying operations, but using The scope 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 the transmission is successful.

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

##                                               $.get, like $.post, this function encapsulates the data submitted by the get method, and can only be used to submit data in get to solve asynchronous refresh In terms of method, the usage method is similar to the above. No more demonstration here.

Four, $ .Getjson, this is further packaging, that is, operate the return data type JSON. There are only three parameters in it that we need to set, which are very simple: url, [data], [callback]. (If you want to see more, go to the PHP Chinese website AJAX Development Manual column to learn)

In fact, I know the $.ajax method, and other You can use them all, they are all the same, and they are actually very simple.

But there is another problem here, which is more troublesome, that is, what should we do if the page data volume 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 to save 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>

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

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

The above is the detailed content of How to use ajax specifically? Introduction to specific operations using ajax. For more information, please follow other related articles on the PHP Chinese website!