JQuery读书笔记--JQuery-Form中的AjaxForm和AjaxSubmit的区别
zhuchengzzcc 2011-09-08
JQuery中的AjaxForm和AjaxSubmit使用差不多功能也差不多。很容易误解。
按照作者的解释：
AjaxForm
ajaxForm不能提交表单。在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始
ajaxSubmit
马上由AJAX来提交表单。你可以在任何情况下进行该项提交。
option的参数target:'#output1',//targetelement(s)tobeupdatedwithserverresponse
beforeSubmit:showRequest,//pre-submitcallback
success:showResponse//post-submitcallback
//otheravailableoptions:
//url:url//overrideforform's'action'attribute
//type:type//'get'or'post',overrideforform's'method'attribute
//dataType:null//'xml','script',or'json'(expectedserverresponsetype)
//clearForm:true//clearallformfieldsaftersuccessfulsubmit
//resetForm:true//resettheformaftersuccessfulsubmit
//$.ajaxoptionscanbeusedheretoo,forexample:
//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(){
varoptions={
target:'#output1',//targetelement(s)tobeupdatedwithserverresponse
beforeSubmit:showRequest,//pre-submitcallback
success:showResponse//post-submitcallback
//otheravailableoptions:
//url:url//overrideforform's'action'attribute
//type:type//'get'or'post',overrideforform's'method'attribute
//dataType:null//'xml','script',or'json'(expectedserverresponsetype)
//clearForm:true//clearallformfieldsaftersuccessfulsubmit
//resetForm:true//resettheformaftersuccessfulsubmit
//$.ajaxoptionscanbeusedheretoo,forexample:
//timeout:3000
};
//bindformusing'ajaxForm'
$('#myForm1').ajaxForm(options);
});
//pre-submitcallback
functionshowRequest(formData,jqForm,options){
//formDataisanarray;hereweuse$.paramtoconvertittoastringtodisplayit
//buttheformplugindoesthisforyouautomaticallywhenitsubmitsthedata
varqueryString=$.param(formData);
//jqFormisajQueryobjectencapsulatingtheformelement.Toaccessthe
//DOMelementfortheformdothis:
//varformElement=jqForm[0];
alert('Abouttosubmit:\n\n'+queryString);
//herewecouldreturnfalsetopreventtheformfrombeingsubmitted;
//returninganythingotherthanfalsewillallowtheformsubmittocontinue
returntrue;
}
//post-submitcallback
functionshowResponse(responseText,statusText){
//fornormalhtmlresponses,thefirstargumenttothesuccesscallback
//istheXMLHttpRequestobject'sresponseTextproperty
//iftheajaxFormmethodwaspassedanOptionsObjectwiththedataType
//propertysetto'xml'thenthefirstargumenttothesuccesscallback
//istheXMLHttpRequestobject'sresponseXMLproperty
//iftheajaxFormmethodwaspassedanOptionsObjectwiththedataType
//propertysetto'json'thenthefirstargumenttothesuccesscallback
//isthejsondataobjectreturnedbytheserver
alert('status:'+statusText+'\n\nresponseText:\n'+responseText+
'\n\nTheoutputdivshouldhavealreadybeenupdatedwiththeresponseText.');
}
ajaxSubmit
The following code controls the HTML form beneath it. It uses ajaxSubmit to submit the form.
$(document).ready(function(){
varoptions={
target:'#output2',//targetelement(s)tobeupdatedwithserverresponse
beforeSubmit:showRequest,//pre-submitcallback
success:showResponse//post-submitcallback
//otheravailableoptions:
//url:url//overrideforform's'action'attribute
//type:type//'get'or'post',overrideforform's'method'attribute
//dataType:null//'xml','script',or'json'(expectedserverresponsetype)
//clearForm:true//clearallformfieldsaftersuccessfulsubmit
//resetForm:true//resettheformaftersuccessfulsubmit
//$.ajaxoptionscanbeusedheretoo,forexample:
//timeout:3000
};
//bindtotheform'ssubmitevent
$('#myForm2').submit(function(){
//insideeventcallbacks'this'istheDOMelementsowefirst
//wrapitinajQueryobjectandtheninvokeajaxSubmit
$(this).ajaxSubmit(options);
//!!!Important!!!
//alwaysreturnfalsetopreventstandardbrowsersubmitandpagenavigation
returnfalse;
});
});
//pre-submitcallback
functionshowRequest(formData,jqForm,options){
//formDataisanarray;hereweuse$.paramtoconvertittoastringtodisplayit
//buttheformplugindoesthisforyouautomaticallywhenitsubmitsthedata
varqueryString=$.param(formData);
//jqFormisajQueryobjectencapsulatingtheformelement.Toaccessthe
//DOMelementfortheformdothis:
//varformElement=jqForm[0];
alert('Abouttosubmit:\n\n'+queryString);
//herewecouldreturnfalsetopreventtheformfrombeingsubmitted;
//returninganythingotherthanfalsewillallowtheformsubmittocontinue
returntrue;
}
//post-submitcallback
functionshowResponse(responseText,statusText){
//fornormalhtmlresponses,thefirstargumenttothesuccesscallback
//istheXMLHttpRequestobject'sresponseTextproperty
//iftheajaxSubmitmethodwaspassedanOptionsObjectwiththedataType
//propertysetto'xml'thenthefirstargumenttothesuccesscallback
//istheXMLHttpRequestobject'sresponseXMLproperty
//iftheajaxSubmitmethodwaspassedanOptionsObjectwiththedataType
//propertysetto'json'thenthefirstargumenttothesuccesscallback
//isthejsondataobjectreturnedbytheserver
alert('status:'+statusText+'\n\nresponseText:\n'+responseText+
'\n\nTheoutputdivshouldhavealreadybeenupdatedwiththeresponseText.');
}
