吐槽一下先

好久沒開發了，今天遇到一個客戶form提交的問題，想把form提交從同步變成ajax的非同步方式，在網頁接受返回來的資料，使用的是jquery from外掛，於是網上搜了一圈，部落格園，csdn，發現幾乎99%全都是錯的，剩下的1%排版也有問題，很不好看，浪費了大量的時間，然後去官方看文件十分鐘就解決了，真是傷不起。現在國內的部落格都是貼上複製就成一篇文章，這個現象csdn最嚴重，部落格園還好些，有點原創的東西，大牛也多。

開始正文

這個外掛的使用方法呢根本不是像網上很多部落格說的如下所示的使用方法

  $('#myForm02').ajaxForm(function (sesponseTest) {
            
 
//$("#comment").val(sesponseTest);
            alert("Thank you for your comment!" + sesponseTest);
        });

而是像我下圖這樣的使用方法

   $(document).ready(function () {
        var picString = "";
        var options = {
            target: '#output2',   // target element(s) to be updated with server response
 

            success: function () {
                alert("success");
            }// 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
        };
        $('#myForm02').submit(function () {
            $(this).ajaxSubmit(options);
            return false; //阻止表單預設提交
        });

需要先定義一個options引數，然後根據自己的情況給options引數的各屬性賦值，然後再呼叫，我這邊使用的是ajaxsubmit方法，ajaxform使用也是這樣的。

關於ajaxForm 和ajaxSubmit的區別

ajaxform時被動的提交，而ajaxsubmit是主動的提交，這樣說起來可能有點難於理解，簡單來說其實就是ajaxform就等於下圖的這種呼叫方式

$('#myForm02').submit(function () {
            $(this).ajaxSubmit(options);
            return false; //阻止表單預設提交
        });

tips

使用這個外掛要注意jquery的版本要是1.7才可以，我嘗試的時候使用3.3.1是會報錯的。

最後附上jquery form的官網，大家如果還有疑問的話，可以直接去那上面看看 http://malsup.com/jquery/form/