JQuery-encapsulated ajax and JQuery-encapsulated ajax

JQuery-encapsulated ajax and JQuery-encapsulated ajax

For some page effects, verification, and so on, we are done through the JavaScript language, but it is like our Java code, is the most basic of the foreground language, jQuery encapsulates js Code to facilitate the compilation of front-end Code. In addition, it also has a major advantage in solving browser compatibility issues, this is one of the most important reasons for using it.

Now, to meet users' needs, Asynchronous refreshing of Ajax (Asynchronous JavaScript + XML) has played an incomparable role. Previously, Ajax operations were written, we always need to perform several necessary steps like JDBC code: AJAX -- the core XMLHttpRequest object, and jQuery also encapsulates Ajax asynchronous operations. Here we will look at several common methods.

 

$. Ajax, $. post, $. get, $. getJSON.

 

 

I. $. ajax: This is the basic step for jquery to encapsulate ajax. You can use this function to complete all functions of asynchronous communication. In other words, we can use this method to perform asynchronous refresh operations under any circumstances. However, it has many parameters and may be troublesome sometimes. Take a look at common parameters:

Var configObj = {

Method // data submission method: get and post

Url // data submission path

Async // whether asynchronous refresh is supported. The default value is true.

Data // the data to be submitted

DataType // type of data returned by the server, such as xml, String, and Json

Success // callback function after successful request

Error // callback function after request failure

}

 

$. Ajax (configObj); // call through the $. ajax function.

 

Let's take a look at the actual example. Let's look at an example of asynchronous deletion:

1. <Span style = "font-size: 18px;"> // Delete
2. $. Ajax ({
3. Type: "POST", // submission method
4. Url: "$ {pageContext. request. contextPath}/org/doDelete. action", // path
5. Data :{
6. "Org. id": "$ {org. id }"
7. }, // Data, which is transmitted in Json format
8. Success: function (result) {// The returned data is processed based on the result.
9. If (result. success ){
10. $ ("# TipMsg"). text ("data deleted ");
11. Tree. deleteItem ("$ {org. id}", true );
12. } Else {
13. $ ("# TipMsg"). text ("failed to delete data ");
14. }
15. }
16. });
17. </Span>

 

Ii. $. post, this function is actually further encapsulated for $. ajax, which reduces the parameters and simplifies the operation, but the application scope is smaller. $. Post simplifies the data submission method and can only be submitted in POST mode. It can only be an asynchronous access server. It cannot be accessed synchronously and cannot handle errors. When these conditions are met, we can use this function to facilitate our programming. Its main parameters, such as method and async, are set by default and cannot be changed. The example is not described.

Url: The sending request address.

Data: Key/value parameter to be sent.

Callback: callback function when sending successfully.

Type: The returned content format is xml, html, script, json, text, and _ default.

 

3, $. get, and $. like post, this function encapsulates the submitted data of the get method. It can only be used in the way that the get data is submitted to solve asynchronous refresh. The usage is similar to the above. We will not demonstrate it here.

 

4. $. getJSON: Further encapsulation, that is, operations on the returned data type as Json. There are three parameters in it, which need to be set, which is very simple: url, [data], [callback].

 

In fact, the $. ajax method will be used in other cases. It is the same and actually very simple.

 

However, there is another problem, which is troublesome. What should I do if the page data volume is large? In conventional form processing, we can use the framework Struts2 to automatically obtain and encapsulate the form in the domain-driven mode. How can we encapsulate the form through ajax? Here, JQuery has a plug-in, Jquery Form. By introducing this js file, we can imitate the Form to support the Struts2 domain-Driven Mode for Automatic Data encapsulation. Usage is similar to $. ajax. Let's take a look at the actual example. Here we write a front-end code to save the user:

1. <Span style = "font-size: 18px;" >$ (function (){
2. Var options = {
3. BeforeSubmit: function () {// process the previously required functions
4. $ ("TipMsg"). text ("data is being saved. Please wait ...");
5. $ ("# InsertBtn"). attr ("disabled", true );
6. },
7. Success: function (result) {// callback function required after the return is successful
8. If (result. success ){
9. $ ("# TipMsg"). text ("organization saved successfully ");
11. // Here is the corresponding tree, which will be introduced later,
12. // Control tree components and add new nodes
13. Var tree = window. parent. treeFrame. tree;
14. Tree. insertNewChild ("$ {org. id}", result. id, result. name );
15. } Else {
16. $ ("# TipMsg"). text ("failed to save organization ");
17. }
18. // Enable the Save button
19. $ ("# InsertBtn"). attr ("disabled", false );
20. },
21. ClearForm: true
22. };
24. $ ('# OrgForm'). ajaxForm (options); // submit data using the ajaxForm method in Jquery. Form.
25. });
26. </Span>

 

In this way, we no longer need to encapsulate and process data, which greatly simplifies asynchronous refresh operations like ajax operations. In summary, the ajax operations in JQuery are much used, which is very similar to form processing, but the functions are different.

 

 

 

From http://blog.csdn.net/qq_36859415/article/details/53766880