JQuery读书笔记--JQuery-Form中的AjaxForm和AjaxSubmit的区别JQuery中的AjaxForm和AjaxSubmit使用差不多功
JQuery读书笔记--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[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.');?
}?
?
