JQuery in AjaxForm and AjaxSubmit function using almost the same. It is easy to misunderstand.
According to the author's explanation:
ajaxForm
ajaxForm can not submit the form. In the document ready function, we use the ajaxForm to submit a form to prepare for AJAX. Submit action must begin with the Submit
ajaxSubmit
immediately to submit the form by the AJAX. You can submit this in any case.
option parameters
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
$(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[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 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[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.');
}
Reproduced in: https: //www.cnblogs.com/zhangchenliang/archive/2011/07/27/2117891.html