Summary of Ajax syntax examples in Jquery

In Java software development, in the background we can encapsulate the code through various frameworks, such as SSH, etc. , which facilitates us to write 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, It provides AOP programming method, which greatly facilitates us; hibernate and IBatis encapsulate JDBC code, and we do not need 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 The code is the same, it is the most basic front-end language, and jQuery encapsulates the js code to facilitate the writing of our front-end code, and it also has a very big advantage of solving the browser compatibility problem, which is why we use it One of the very important reasons.

And now in order to meet the needs of users, Ajax (Asynchronous Javascript + XML)Asynchronous refresh plays an incomparable role. In the past, when writing Ajax operations, it was always We need to perform several necessary steps like JDBC code:

AJAX - core XMLHttpRequest object, and JQuery also encapsulates Ajax asynchronous operations. Here are some commonly used ones The way. $.post, $.ajax, $.get, $.getJSON.

##                                     $.post, this function actually further encapsulates $.ajax, reducing the number of Parameters simplify 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 the transmission is successful.

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

2. $.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 //Data submission method: get and post

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.

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

[javascript]

1. ##"font-size:18px;">                                                                                                                                                                  
,
2. //Submission method

3. # Url: "$ {PageContext.request.ContextPath} /ORG/dodeLete.action" , ##// Path

Data: {
"ORG.ID" ##: ##: "${org.id}"

5. ##                                                                                                                                                     

6. # Success:

   function(result) {//The returned data will be processed accordingly according to the result

7. ##                                                                                                                                                                                   ​                                                                               since "#tipMsg").text("Delete data successfully");

## tree.deleteItem(
8. " ${org.id}"

   , true);

9. ##                                         

   ##        

10.                                                                                                                                  });

11. ##

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

13. 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].

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: ##"font-size:18px;"

> $(function(){

##                                                                                                                                                                                                                                                                                    ) {

//Processing functions that needed to be done before

$("tipMsg").text("Data is being saved, please wait...");

##                     $("#insertBtn").attr("disabled", true);

           },

#                                                                                              {

//Return the callback function required after success ##                                                                      

##                                                                                                                                                                                                                                                                         Arrive,

##                                 //Control the tree component and add new nodes

##                

var tree = window.parent.treeFrame.tree;

##                                                                                                                                                                                    tree.insertNewChild("${org.id}", result.id, result.name); ##                                                                                                                                                                                                      (

"Organization saving failed"

); #                                                                                                                                                                                              # disabled"

,

false);

## },

                                                                                                                                                                                                                                  

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

//Through the ajaxForm method in Jquery.Form Submit

## });

#

This way we no longer need to encapsulate the data, which greatly simplifies our ajax operation and asynchronous refresh 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. 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.

The above is the detailed content of Summary of Ajax syntax examples in Jquery. For more information, please follow other related articles on the PHP Chinese website!