JQuery ajaxForm,ajaxSubmit的联系和区别

ajaxForm和ajaxSubmit的使用方式和功能都类似，但是是有区别的 ，使用中很容易搞错

我们先来看看ajaxForm的源码

/** * ajaxForm() provides a mechanism for fully automating form submission. * * The advantages of using this method instead of ajaxSubmit() are: * * 1: This method will include coordinates for <input type="image" /> elements (if the element *    is used to submit the form). * 2. This method will include the submit element's name/value data (for the element that was *    used to submit the form). * 3. This method binds the submit() method to the form for you. * * The options argument for ajaxForm works exactly as it does for ajaxSubmit.  ajaxForm merely * passes the options argument along after properly binding events for submit elements and * the form itself. */$.fn.ajaxForm = function(options) {    options = options || {};    options.delegation = options.delegation && $.isFunction($.fn.on);     // in jQuery 1.3+ we can fix mistakes with the ready state    if (!options.delegation && this.length === 0) {        var o = { s: this.selector, c: this.context };        if (!$.isReady && o.s) {            log('DOM not ready, queuing ajaxForm');            $(function() {                $(o.s,o.c).ajaxForm(options);            });            return this;        }        // is your DOM ready?  http://docs.jquery.com/Tutorials:Introducing_$(document).ready()        log('terminating; zero elements found by selector' + ($.isReady ? '' : ' (DOM not ready)'));        return this;    }     if ( options.delegation ) {        $(document)            .off('submit.form-plugin', this.selector, doAjaxSubmit)            .off('click.form-plugin', this.selector, captureSubmittingElement)            .on('submit.form-plugin', this.selector, options, doAjaxSubmit)            .on('click.form-plugin', this.selector, options, captureSubmittingElement);        return this;    }     return this.ajaxFormUnbind()        .bind('submit.form-plugin', options, doAjaxSubmit)        .bind('click.form-plugin', options, captureSubmittingElement);};

ajaxForm不能提交表单。在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始

实例代码

$(document).ready(function() {     var options = {         target:        '#output1',   // target element(s) to be updated with server response <span><span style="color:#008200;"><span style="color:#000000;">目标元素,以被更新与服务器的回应</span></span></span>        beforeSubmit:  showRequest,  // pre-submit callback 表单提交前执行的函数        success:       showResponse  // post-submit callback  成功提交表单后的回调函数 <pre name="code" class="javascript">        // other available options: 

//url: url // override for form's 'action' attribute 重写表单url //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 //jqForm是一个jquery对象数组 // 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.'); }

ajaxSubmitThe 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.'); }

总结：

ajaxForm 

ajaxForm()不能提交表单。在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始 

ajaxForm()适用于以表单提交方式处理ajax技术（需要提供表单的action、id、 method，最好在表单中提供submit按钮）它大大简化了使用ajax技术提交表单时的数据传递问题，使用ajaxForm()你不需要逐个的以 JavaScript的方式获取每个表单属性的值，并且也不需要在请求路径后面通过url重写的方式传递数据。ajaxForm()会自动收集当前表单中每个属性的值，然后将其以表单提交的方式提交到目标url。这种方式提交数据较安全，并且使用起来更简单，不必写过多冗余的JavaScript代码

 

ajaxSubmit 
ajaxSubmit()马上由AJAX来提交表单。你可以在任何情况下进行该项提交。 

ajaxSubmit()适用于以事件的机制以ajax提交form表单（超链接、图片的click事件），该方法作用与ajaxForm()类似，但它更为灵活，因为他依赖于事件机制，只要有事件存在就能使用该方法。你只需指定该form的action属性即可，不需要提供submit按钮。