An explanation of ajax encapsulation in JQuery

For some page effects, verification, etc., we all use JavaScript language to complete it, but it is also like our Java code, which is the most basic front-end language, and jQuery is a convenient way to encapsulate js code. The writing of our front-end code also has a very big advantage in solving browser compatibility issues, which is one of the reasons why it is very important for us to use it.

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. Steps: AJAX - the core XMLHttpRequest object, and jQuery also encapsulates Ajax asynchronous operations. Here are some commonly used methods.

$.ajax, $.post, $.get, $.getJSON.

1. $.ajax, this is the most basic step for jquery to encapsulate ajax. It can be completed by using this function All features of asynchronous communication. 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 = {

                                                        use using         use using ’ s using ’s ’ s ’ using ’s ’ using ’s ’ ‐ ‐  ‐ ‐ ‐                                                     to to

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 et al.

## u j j j j j j j j j j j j j

E error // The callback function after the failure of the request

}

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

OK, let’s look at a practical example, let’s look at an example of asynchronous deletion:

"font-size:18px;">                                                                                                                                                                        

type :
1. "POST",

   //Submission method

   # url :
"${pageContext. request.contextPath}/org/doDelete.action",
2. //Path

3. ## data: {             

   "org.id":
"${org.id}"

4. #                                                                                                                                                                                  It is json format for transmission

5. ## SUCCCESS:

   Function (Result) {
// Return the data to process accordingly according to the results

6.                                                                                                                                                                                                                                                                       through

   "Delete data successfully");

8.                                                                                                                                                                                                                                                       . else {

   ##                                                                                                                              

9. ##                                                                                                                  ##

                                                              $.post, this function actually further encapsulates $.ajax, reducing parameters, 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 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.

     Three, $.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.

，, $ .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].

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 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 that saves the user:

1. ##"font-size: 18px;"> $(function(){
2. ##var options = {

                                                                                                  : ).text(
3. "Data is being saved, please wait..."); attr(

   "disabled", true); success : function(result) {//Return the callback function required after success

4. ##                                                                                          ##                                                                                                                                                                                                                                                              through

5. ##                                       //Here is the corresponding tree, which will be introduced later, #               //Control the tree component and add new nodes

   ##                                                                                                                                                     

6.                                                                                                                                                                                                                                                         . else {

7. ##                                                                                                                                      

   ##                                                                                                                                 ##"#insertBtn").attr(

   "disabled",
false);

8. ## Clearform: TRUE

   ##}
##           $(
9. '#orgForm').ajaxForm(options);

   //Submit through the ajaxForm method in Jquery.Form

10. });

11. ##

    ## This way we There is no need to encapsulate data, which greatly simplifies our asynchronous refresh operations such as ajax operations. In summary, the ajax operation in JQuery seems to be used a lot, and it is still very similar to the form processing, but the functions implemented are different.

13. From

The above is the detailed content of An explanation of ajax encapsulation in JQuery. For more information, please follow other related articles on the PHP Chinese website!