JQuery Ajaxsubmit implement Ajax submit form local Refresh _jquery

Introduction to Ajax

AJAX = Asynchronous JavaScript and XML (asynchronous JavaScript and XML).

AJAX is not a new programming language, but a new way of using existing standards.

AJAX is the art of exchanging data with the server and updating parts of the Web page without reloading the entire page.

Need to introduce: jquery-form.js

Instructions for use:

Java code

$ (document). Ready (function () { 
var options = { 
target: ' #mydiv ',//the area//beforesubmit:showrequest that needs to be refreshed 
// Method invoked before submission//success:showresponse///Other 
available options: 
//url:url//Submit URL, default use form Actio N 
//type:type//' get ' or ' post ', override to form ' method ' attribute 
//datatype:null//' xml ', ' script ', or ' JSON ' (expected server response type)//clearform:true//whether to clear form//resetform:true//reset 
form 
//$.aja x options can be used this too, for example: 
//timeout:3000 
}; 
The binding form commits the event 
$ (' #myForm '). Submit (function () { 
$ (this). Ajaxsubmit (options); 
// !!! Important!!! 
Always return FALSE to prevent standard browser the submit and page navigation return 
false; 
 

Before and after the call method:

Java code

Pre-submit callback function Showrequest (FormData, Jqform, Options) {//FormData is ' an array; we'll use $.param t o convert it to a string to display it//But the "form plugin does this for your automatically when it submits the data V 
AR querystring = $.param (FormData); Jqform is a JQuery object encapsulating the form element. 
To access the//DOM element for the form does this://var formelement = jqform[0]; 
Alert (' About to submit: \ n ' + querystring '); 
Here we are could return false to prevent the form from being submitted; 
Returning anything other than false would allow the form submit to continue return true; }//Post-submit callback function Showresponse (ResponseText, statustext) {//For normal HTML responses, the Ument to the success callback/are the XMLHttpRequest object ' s ResponseText property//If the Ajaxsubmit method was PA Ssed an Options Object and the DataType//property set to ' XML ' then the ' the ' the ' the ' argument to the success callback
Is the XMLHttpRequest Object Responsexml Property//If the Ajaxsubmit method was passed a Options object with the DataType//Property set to ' JSON ' then the ' the ' the ' success callback/are the JSON data object returned By the server alert (' Status: ' + StatusText + ' \n\nresponsetext: \ n ' + responsetext + ' \n\nthe output div should have AL 
Ready been updated with the responsetext. ');  }

You can write a common method in your project:

Java code

Local Submit Form 
function Formsubmit (formid, divID, url) { 
$ (' # ' + formid). Submit (function () { 
$ (this). Ajaxsubmit ({ 
target: ' # ' + divid, 
url:url, 
error:function () { 
alert (' Load page ' + URL + ') Error! ') 
} 
}); 
return false; 
}); 

=====================================================================

Case Refresh Table:

1. Put the table in a separate JSP, the main page include table page.

2. Main Page:

Java code

Window.onload=function () { 
//ajax submit form Refresh Table 
$ (' #queryForm '). Submit (function () { 
$ (this). Ajaxsubmit ({ 
target: ' #table1 ' 
}); 
return false; 
}); 

Click on the Query button to submit form.

3.java:form the method of submitting a call is the same as an ordinary action, struts configures the action to jump to that separate table JSP page, and when it returns to success, it will see the table refreshed.

Java code

/** 
* Ajax Rollup query undisclosed insider list 
* Department Compliance Wind Control Commissioner Summary Enquiry/public 
String ajaxgatherinsiderlist () { 
//related business data query return 
SUCCESS; 
}

The above is a small set to introduce the jquery Ajaxsubmit implementation of Ajax submission form Local refresh, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!