jQuery ajaxSubmit Realization of ajax Submission Form Partial Refresh

Introduction to AJAX

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

AJAX is not a new programming language, but a new approach to using existing standards.

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

Need to be introduced: jquery-form. js

Instructions for use:

Java code

$(document).ready(function() { 
var options = { 
target: '#mydiv', //  Areas to be refreshed  
//beforeSubmit: showRequest, //  Methods called before committing  
//success: showResponse //  The method of returning the terracotta figures  
// other available options: 
//url: url //  Submitted URL,  Use by default FORM ACTION 
//type: type // 'get' or 'post', override for form's 'method' attribute 
//dataType: null // 'xml', 'script', or 'json' (expected server response type) 
//clearForm: true //  Whether to empty form 
//resetForm: true //  Whether to reset form 
// $.ajax options can be used here too, for example: 
//timeout: 3000 
}; 
//  Binding FORM Submit an event  
$('#myForm').submit(function() { 
$(this).ajaxSubmit(options); 
// !!! Important !!! 
// always return false to prevent standard browser submit and page navigation 
return false; 
}); 
}); 

Before and after calling methods:

Java code

// pre-submit callback 
function showRequest(formData, jqForm, options) { 
// formData is an array; here we use $.param to convert it to a string to display it 
// but the form plugin does this for you automatically when it submits the data 
var queryString = $.param(formData); 
// jqForm is a jQuery object encapsulating the form element. To access the 
// DOM element for the form do this: 
// var formElement = jqForm[0]; 
alert('About to submit: \n\n' + queryString); 
// here we could return false to prevent the form from being submitted; 
// returning anything other than false will allow the form submit to continue 
return true; 
} 
// post-submit callback 
function showResponse(responseText, statusText) { 
// for normal html responses, the first argument to the success callback 
// is the XMLHttpRequest object's responseText property 
// if the ajaxSubmit method was passed an Options Object with the dataType 
// property set to 'xml' then the first argument to the success callback 
// is the XMLHttpRequest object's responseXML property 
// if the ajaxSubmit method was passed an Options Object with the dataType 
// property set to 'json' then the first argument to the success callback 
// is the json data object returned by the server 
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
'\n\nThe output div should have already been updated with the responseText.'); 
} 

You can write 1 common method in the project:

Java code

//  Submit a form locally  
function formSubmit(formId, divId, url) { 
$('#' + formId).submit(function() { 
$(this).ajaxSubmit( { 
target : '#' + divId, 
url : url, 
error : function() { 
alert(' Load a page ' + url + ' Time error! ') 
} 
}); 
return false; 
}); 
} 

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

Case refresh TABLE:

1. Put 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 the query button to submit FORM.

3. JAVA: The method of FORM submitting call is similar to that of ordinary ACTION. In STRUTS, the ACTION is configured to jump to that separate TABLE JSP page. After returning successfully, you will see that TABLE is refreshed.

Java code

/** 
* AJAX Summary query   Undisclosed list of insiders  
*  Departmental Compliance Risk Control Specialist   Summary query  
*/ 
public String ajaxgatherinsiderlist() { 
// Query of related business data  
return SUCCESS; 
}