本文转载自：http://www.cnblogs.com/qiantuwuliang/archive/2009/09/14/1566604.html
JQuery中的AjaxForm和AjaxSubmit使用差不多功能也差不多。很容易误解。
按照作者的解释：
AjaxForm
ajaxForm不能提交表单。在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始
ajaxSubmit
马上由AJAX来提交表单。你可以在任何情况下进行该项提交。
option的参数
1 var options = {
2 target: '#output1', // target element(s) to be updated with server response
3 beforeSubmit: showRequest, // pre-submit callback
4 success: showResponse // post-submit callback
5
6 // other available options:
7 //url: url // override for form's 'action' attribute
8 //type: type // 'get' or 'post', override for form's 'method' attribute
9 //dataType: null // 'xml', 'script', or 'json' (expected server response type)
10 //clearForm: true // clear all form fields after successful submit
11 //resetForm: true // reset the form after successful submit
12
13 // $.ajax options can be used here too, for example:
14 //timeout: 3000
15 };
示例代码摘自：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
1 // prepare the form when the DOM is ready
2 $(document).ready(function() {
3 var options = {
4 target: '#output1', // target element(s) to be updated with server response
5 beforeSubmit: showRequest, // pre-submit callback
6 success: showResponse // post-submit callback
7
8 // other available options:
9 //url: url // override for form's 'action' attribute
10 //type: type // 'get' or 'post', override for form's 'method' attribute
11 //dataType: null // 'xml', 'script', or 'json' (expected server response type)
12 //clearForm: true // clear all form fields after successful submit
13 //resetForm: true // reset the form after successful submit
14
15 // $.ajax options can be used here too, for example:
16 //timeout: 3000
17 };
18
19 // bind form using 'ajaxForm'
20 $('#myForm1').ajaxForm(options);
21 });
22
23 // pre-submit callback
24 function showRequest(formData, jqForm, options) {
25 // formData is an array; here we use $.param to convert it to a string to display it
26 // but the form plugin does this for you automatically when it submits the data
27 var queryString = $.param(formData);
28
29 // jqForm is a jQuery object encapsulating the form element. To access the
30 // DOM element for the form do this:
31 // var formElement = jqForm[0];
32
33 alert('About to submit: \n\n' + queryString);
34
35 // here we could return false to prevent the form from being submitted;
36 // returning anything other than false will allow the form submit to continue
37 return true;
38 }
39
40 // post-submit callback
41 function showResponse(responseText, statusText) {
42 // for normal html responses, the first argument to the success callback
43 // is the XMLHttpRequest object's responseText property
44
45 // if the ajaxForm method was passed an Options Object with the dataType
46 // property set to 'xml' then the first argument to the success callback
47 // is the XMLHttpRequest object's responseXML property
48
49 // if the ajaxForm method was passed an Options Object with the dataType
50 // property set to 'json' then the first argument to the success callback
51 // is the json data object returned by the server
52
53 alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
54 '\n\nThe output div should have already been updated with the responseText.');
55 }
ajaxSubmit
The following code controls the HTML form beneath it. It uses ajaxSubmit to submit the form.
1 // prepare the form when the DOM is ready
2 $(document).ready(function() {
3 var options = {
4 target: '#output2', // target element(s) to be updated with server response
5 beforeSubmit: showRequest, // pre-submit callback
6 success: showResponse // post-submit callback
7
8 // other available options:
9 //url: url // override for form's 'action' attribute
10 //type: type // 'get' or 'post', override for form's 'method' attribute
11 //dataType: null // 'xml', 'script', or 'json' (expected server response type)
12 //clearForm: true // clear all form fields after successful submit
13 //resetForm: true // reset the form after successful submit
14
15 // $.ajax options can be used here too, for example:
16 //timeout: 3000
17 };
18
19 // bind to the form's submit event
20 $('#myForm2').submit(function() {
21 // inside event callbacks 'this' is the DOM element so we first
22 // wrap it in a jQuery object and then invoke ajaxSubmit
23 $(this).ajaxSubmit(options);
24
25 // !!! Important !!!
26 // always return false to prevent standard browser submit and page navigation
27 return false;
28 });
29 });
30
31 // pre-submit callback
32 function showRequest(formData, jqForm, options) {
33 // formData is an array; here we use $.param to convert it to a string to display it
34 // but the form plugin does this for you automatically when it submits the data
35 var queryString = $.param(formData);
36
37 // jqForm is a jQuery object encapsulating the form element. To access the
38 // DOM element for the form do this:
39 // var formElement = jqForm[0];
40
41 alert('About to submit: \n\n' + queryString);
42
43 // here we could return false to prevent the form from being submitted;
44 // returning anything other than false will allow the form submit to continue
45 return true;
46 }
47
48 // post-submit callback
49 function showResponse(responseText, statusText) {
50 // for normal html responses, the first argument to the success callback
51 // is the XMLHttpRequest object's responseText property
52
53 // if the ajaxSubmit method was passed an Options Object with the dataType
54 // property set to 'xml' then the first argument to the success callback
55 // is the XMLHttpRequest object's responseXML property
56
57 // if the ajaxSubmit method was passed an Options Object with the dataType
58 // property set to 'json' then the first argument to the success callback
59 // is the json data object returned by the server
60
61 alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
62 '\n\nThe output div should have already been updated with the responseText.');
63 }
