Complete example of Ajax operation in JQuery

In the development of Java software, we can encapsulate the code through various frameworks in the background, such as SSH, which is convenient for us to write Java code. For example, Struts and SpringMVC encapsulate and control the process from the foreground to action, so that we only need to carry out a simple configuration to achieve it; spring encapsulates the management of various objects and provides the way of AOP programming, which greatly facilitates us; hibernate and IBatis encapsulate JDBC code, so we don't need to write repeated and complicated JDBC code every time.

Where's the front desk, For some effects on page 1, Verification, etc., we are all done through JavaScript language. However, just like our Java code 1, it is the most basic foreground language, while jQuery encapsulates js code to facilitate the writing of our foreground code, and it has a very big advantage that it solves the compatibility problem of browsers, which is one of the most important reasons why we use it.

Now, in order to meet the needs of users, Ajax (Asynchronous Javascript + XML) asynchronous refresh has played an unparalleled role. Before writing Ajax operation, we always need to take several necessary steps like JDBC code 1:

AJAX-The core XMLHttpRequest object, and JQuery also encapsulates Ajax asynchronous operation. Here, look at several commonly used ways. $. ajax, $. post, $. get, $. getJSON.

1, $. ajax, this is JQuery to ajax encapsulation of the most basic step, through the use of this function can complete all the functions of asynchronous communication. That is to say, under any circumstances, we can carry out asynchronous refresh operation through this method. However, it has many parameters, and sometimes it may be troublesome. Look at the commonly used parameters under 1:

var configObj = {
  method // Data submission method: get And post
  url // Road to submit data 
  async // Whether asynchronous refresh is supported, the default is true
  data // Data to be submitted 
  dataType // The type of data returned by the server, such as xml,String,Json Etc 
  success // Callback function after successful request 
  error // Callback function after request failure 
 } 

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

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

<span style="font-size:18px;">   //  Delete  
    $.ajax({ 
     type : "POST", // Submission method  
     url : "${pageContext.request.contextPath}/org/doDelete.action",// Path  
     data : { 
      "org.id" : "${org.id}" 
     },// Data, which is used here Json Format for transmission  
     success : function(result) {// The returned data is processed according to the results  
      if ( result.success ) { 
       $("#tipMsg").text(" Delete data successfully "); 
       tree.deleteItem("${org.id}", true); 
      } else { 
       $("#tipMsg").text(" Failed to delete data "); 
      } 
     } 
    }); 
</span> 

2. $. post, this function is actually a further encapsulation of $. ajax, reducing parameters and simplifying operations, but the scope of application is smaller. $. post simplifies data submission, and can only be submitted in POST mode. You can only access the server asynchronously, not synchronously, and you can't handle errors. Under these conditions, we can use this function to facilitate our programming. Its main parameters, such as method and async, are set by default, and we cannot change them. Examples will not be introduced.

url: Send request address.

data: Key/value parameters to be sent.

callback: Callback function on successful sending.

type: Returns the content format, xml, html, script, json, text, _ default.

3. $. get, and $. post1, this function is to encapsulate the submitted data of get method, and can only be used in get to submit data to solve asynchronous refresh, and the use mode is similar to the above. No more demonstration here.

4. $. getJSON, which is a step forward encapsulation, that is, operating on the return data type Json. There are three parameters that we need to set, which are very simple: url, [data] and [callback].

In fact, the $. ajax method, the other will be used, are a kind of, in fact, very simple.

But there is still a problem here, which is troublesome. If the amount of page data is relatively large, what should I do? In the processing of conventional 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 encapsulate automatic data. Usage and $. ajax similar, look at the actual example, here to write a user to save the foreground code:

<span style="font-size:18px;"> $(function(){ 
  var options = { 
   beforeSubmit : function() {// Handle functions that need to be done before  
    $("tipMsg").text(" Please wait while the data is saved ..."); 
    $("#insertBtn").attr("disabled", true); 
   }, 
   success : function(result) {// Returns the callback function required after success  
    if ( result.success ) { 
     $("#tipMsg").text(" The institution was successfully preserved "); 
          // Here is the corresponding 1 Tree, which will be introduced later,  
     //  Control tree components and add new nodes  
     var tree = window.parent.treeFrame.tree; 
     tree.insertNewChild("${org.id}", result.id, result.name); 
    } else { 
     $("#tipMsg").text(" Institutional Save Failure "); 
    } 
    //  Enable the Save button  
    $("#insertBtn").attr("disabled", false); 
   }, 
   clearForm : true 
  }; 
  $('#orgForm').ajaxForm(options); // Pass Jquery.Form In ajaxForm Method to submit  
 }); 
</span> 

In this way, we don't need to encapsulate the data data, which greatly simplifies the asynchronous refresh operation of ajax. To sum up, the operation of ajax in JQuery feels much more used, and the processing of form form is very similar, but the functions realized are not 1. Learning programming, in fact, is to learn the flow of data processing, how to get it from the foreground, transmit it to the server for corresponding processing, and then return it for relevant display. The process is realized through some technologies, and the software development is completed. It feels very interesting.

To learn more about JQuery, we need to query api documents: http://hemin.cn/jq/