JQuery-Form中的AjaxForm和AjaxSubmit的区别
JQuery中的AjaxForm和AjaxSubmit使用差不多功能也差不多。很容易误解。按照作者的解释：
AjaxForm
ajaxForm不能提交表单。在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始
ajaxSubmit
马上由AJAX来提交表单。你可以在任何情况下进行该项提交。
option的参数 var options = { target: '#output1', // target element(s) to be updated with server response beforeSubmit:showRequest,// pre-submit callback success: showResponse// post-submit callback // other available options: //url: url // override for form's 'action' attribute //type: type // 'get' or 'post', override for form's 'method' attribute //dataType:null // 'xml', 'script', or 'json' (expected server response type) //clearForm: true // clear all form fields after successful submit //resetForm: true // reset the form after successful submit // $.ajax options can be used here too, for example: //timeout: 3000 };
示例代码摘自：http://www.malsup.com/jquery/form/#code-samples
ajaxForm
The following code controls the HTML form beneath it. It uses ajaxForm to bind the form and demonstrates how to use pre- and post-submit callbacks
// prepare the form when the DOM is ready $(document).ready(function() { var options = { target: '#output1', // target element(s) to be updated with server response beforeSubmit:showRequest,// pre-submit callback success: showResponse// post-submit callback // other available options: //url: url // override for form's 'action' attribute //type: type // 'get' or 'post', override for form's 'method' attribute //dataType:null // 'xml', 'script', or 'json' (expected server response type) //clearForm: true // clear all form fields after successful submit //resetForm: true // reset the form after successful submit // $.ajax options can be used here too, for example: //timeout: 3000 }; // bind form using 'ajaxForm' $('#myForm1').ajaxForm(options); });// 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; 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 ajaxForm 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 ajaxForm 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.'); }
ajaxSubmit
The following code controls the HTML form beneath it. It uses ajaxSubmit to submit the form.
// prepare the form when the DOM is ready $(document).ready(function() { var options = { target: '#output2', // target element(s) to be updated with server response beforeSubmit:showRequest,// pre-submit callback success: showResponse// post-submit callback // other available options: //url: url // override for form's 'action' attribute //type: type // 'get' or 'post', override for form's 'method' attribute //dataType:null // 'xml', 'script', or 'json' (expected server response type) //clearForm: true // clear all form fields after successful submit //resetForm: true // reset the form after successful submit // $.ajax options can be used here too, for example: //timeout: 3000 }; // bind to the form's submit event $('#myForm2').submit(function() { // inside event callbacks 'this' is the DOM element so we first // wrap it in a jQuery object and then invoke ajaxSubmit $(this).ajaxSubmit(options); // !!! Important !!! // always return false to prevent standard browser submit and page navigation return false; }); });// 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; 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.'); }
页:
[1]