$.ajax 和 jquery.form.js實現表單異步提交

    今天遇到了一個問題:異步刷新表單,表單裏面有radio,事先選中了其中一個,點擊排序後,原來選中的值沒有被選中了。查看是採用了$.ajax()進行異步刷新的,改爲使用jquery.form.js進行異步刷新,原來選中的radio還是被選中的,問題解決了。

    原因是:使用$.ajax的時候沒有采取其他處理,直接是發送了原來默認的url進行了查詢,原來選中的值當然就沒有了,success回調函數中進行了排序。而使用jquery.form.js的時候,沒有調用任何有關的重置表單的變量,自然而然之前選中的值還在。

補充:$.ajax()

    Perform an asynchronous HTTP (Ajax) request.   ——來自官網:http://api.jquery.com/jquery.ajax/

    如果要處理$.ajax()得到的數據,則需要使用回調函數。beforeSend、error、dataFilter、success、complete。

   $.ajax方法詳解(http://www.cnblogs.com/tylerdonet/p/3520862.html)

1.url:
要求爲String類型的參數,(默認爲當前頁地址)發送請求的地址。

2.type:
要求爲String類型的參數,請求方式(post或get)默認爲get。注意其他http請求方法,例如put和delete也可以使用,但僅部分瀏覽器支持。

3.timeout:
要求爲Number類型的參數,設置請求超時時間(毫秒)。此設置將覆蓋$.ajaxSetup()方法的全局設置。

4.async:
要求爲Boolean類型的參數,默認設置爲true,所有請求均爲異步請求。如果需要發送同步請求,請將此選項設置爲false。注意,同步請求將鎖住瀏覽器,用戶其他操作必須等待請求完成纔可以執行。

5.cache:
要求爲Boolean類型的參數,默認爲true(當dataType爲script時,默認爲false),設置爲false將不會從瀏覽器緩存中加載請求信息。

6.data:
要求爲Object或String類型的參數,發送到服務器的數據。如果已經不是字符串,將自動轉換爲字符串格式。get請求中將附加在url後。防止這種自動轉換,可以查看  processData選項。對象必須爲key/value格式,例如{foo1:"bar1",foo2:"bar2"}轉換爲&foo1=bar1&foo2=bar2。如果是數組,JQuery將自動爲不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換爲&foo=bar1&foo=bar2。

7.dataType:
要求爲String類型的參數,預期服務器返回的數據類型。如果不指定,JQuery將自動根據http包mime信息返回responseXML或responseText,並作爲回調函數參數傳遞。可用的類型如下:
xml:返回XML文檔,可用JQuery處理。
html:返回純文本HTML信息;包含的script標籤會在插入DOM時執行。
script:返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時(不在同一個域下),所有post請求都將轉爲get請求。
json:返回JSON數據。
jsonp:JSONP格式。使用SONP形式調用函數時,例如myurl?callback=?,JQuery將自動替換後一個“?”爲正確的函數名,以執行回調函數。
text:返回純文本字符串。

8.beforeSend
要求爲Function類型的參數,發送請求前可以修改XMLHttpRequest對象的函數,例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求。XMLHttpRequest對象是惟一的參數。
            function(XMLHttpRequest){
               this;   //調用本次ajax請求時傳遞的options參數
            }
9.complete
要求爲Function類型的參數,請求完成後調用的回調函數(請求成功或失敗時均調用)。參數:XMLHttpRequest對象和一個描述成功請求類型的字符串。
          function(XMLHttpRequest, textStatus){
             this;    //調用本次ajax請求時傳遞的options參數
          }

10.success:要求爲Function類型的參數,請求成功後調用的回調函數,有兩個參數。
         (1)由服務器返回,並根據dataType參數進行處理後的數據。
         (2)描述狀態的字符串。
         function(data, textStatus){
            //data可能是xmlDoc、jsonObj、html、text等等
            this;  //調用本次ajax請求時傳遞的options參數
         }

11.error:
要求爲Function類型的參數,請求失敗時被調用的函數。該函數有3個參數,即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數如下:
       function(XMLHttpRequest, textStatus, errorThrown){
          //通常情況下textStatus和errorThrown只有其中一個包含信息
          this;   //調用本次ajax請求時傳遞的options參數
       }

12.contentType
要求爲String類型的參數,當發送信息至服務器時,內容編碼類型默認爲"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。

13.dataFilter
要求爲Function類型的參數,給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據,type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。
            function(data, type){
                //返回處理後的數據
                return data;
            }

14.dataFilter
要求爲Function類型的參數,給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據,type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。
            function(data, type){
                //返回處理後的數據
                return data;
            }

15.global
要求爲Boolean類型的參數,默認爲true。表示是否觸發全局ajax事件。設置爲false將不會觸發全局ajax事件,ajaxStart或ajaxStop可用於控制各種ajax事件。

16.ifModified
要求爲Boolean類型的參數,默認爲false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false,即忽略頭信息。

17.jsonp
要求爲String類型的參數,在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數裏的"callback"部分,例如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給服務器。

18.username
要求爲String類型的參數,用於響應HTTP訪問認證請求的用戶名。

19.password
要求爲String類型的參數,用於響應HTTP訪問認證請求的密碼。

20.processData
要求爲Boolean類型的參數,默認爲true。默認情況下,發送的數據將被轉換爲對象(從技術角度來講並非字符串)以配合默認內容類型"application/x-www-form-urlencoded"。如果要發送DOM樹信息或者其他不希望轉換的信息,請設置爲false。

21.scriptCharset
要求爲String類型的參數,只有當請求時dataType爲"jsonp"或者"script",並且type是GET時纔會用於強制修改字符集(charset)。通常在本地和遠程的內容編碼不同時使用。

$(function(){
    $('#send').click(function(){
         $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             success: function(data){
                         $('#resText').empty();   //清空resText裏面的所有內容
                         var html = ''; 
                         $.each(data, function(commentIndex, comment){
                               html += '<div class="comment"><h6>' + comment['username']
                                         + ':</h6><p class="para"' + comment['content']
                                         + '</p></div>';
                         });
                         $('#resText').html(html);
                      }
         });

    });
});

22.順便說一下$.each()函數:
$.each()函數不同於JQuery對象的each()方法,它是一個全局函數,不操作JQuery對象,而是以一個數組或者對象作爲第1個參數,以一個回調函數作爲第2個參數。回調函數擁有兩個參數:第1個爲對象的成員或數組的索引,第2個爲對應變量或內容。


關於jquery.form.js插件

Submitting a form with AJAX doesn't get any easier than this!

英文: http://malsup.com/jquery/form/

// 綁定表單提交事件處理器
$('#myFormId').submit(function() {
// 提交表單
$(this).ajaxSubmit();
// 爲了防止普通瀏覽器進行表單提交和產生頁面導航(防止頁面刷新?)返回false
return false;
}); 

中文API: http://www.360doc.com/content/12/0930/16/1542811_238911976.shtml

表單插件API提供了幾個方法,讓你輕鬆管理表單數據和進行表單提交。

1. ajaxForm
增加所有需要的事件監聽器,爲AJAX提交表單做好準備。ajaxForm不能提交表單。在document的ready函數中,使用ajaxForm來 爲AJAX提交表單進行準備。ajaxForm接受0個或1個參數。這個單個的參數既可以是一個回調函數,也可以是一個Options對象。
可鏈接(Chainable):可以。

實例:

$('#myFormId').ajaxForm(); 

2. ajaxSubmit

馬上由AJAX來提交表單。大多數情況下,都是調用ajaxSubmit來對用戶提交表單進行響應。ajaxSubmit接受0個或1個參數。這個單個的參數既可以是一個回調函數,也可以是一個Options對象。
可鏈接(Chainable):可以。

實例:

// 綁定表單提交事件處理器
$('#myFormId').submit(function() {
// 提交表單
$(this).ajaxSubmit();
// 爲了防止普通瀏覽器進行表單提交和產生頁面導航(防止頁面刷新?)返回false
return false;
}); 

3. formSerialize

將表單串行化(或序列化)成一個查詢字符串。這個方法將返回以下格式的字符串:name1=value1&name2=value2。
可鏈接(Chainable):不能, 這個方法返回一個字符串。

實例:

var queryString = $('#myFormId').formSerialize();
// 現在可以使用$.get、$.post、$.ajax等來提交數據
$.post('myscript.php', queryString); 

4. fieldSerialize

將表單的字段元素串行化(或序列化)成一個查詢字符串。當只有部分表單字段需要進行串行化(或序列化)時,這個就方便了。這個方法將返回以下格式的字符串:name1=value1&name2=value2。
可鏈接(Chainable):不能,這個方法返回一個字符串。
實例:

var queryString = $('#myFormId .specialFields').fieldSerialize(); 

5. fieldValue

返回匹配插入數組中的表單元素值。從0.91版起,該方法將總是以數組的形式返回數據。如果元素值被判定可能無效,則數組爲空,否則它將包含一個或多於一個的元素值。
可鏈接(Chainable):不能,該方法返回數組。
實例:

// 取得密碼輸入值
var value = $('#myFormId :password').fieldValue();
alert('The password is: ' + value[0]); 

6. resetForm

通過調用表單元素原有的DOM方法,將表單恢復到初始狀態。
可鏈接(Chainable):可以。
實例:

<strong>$('#myFormId').resetForm(); </strong>

7. clearForm

清除表單元素。該方法將所有的文本(text)輸入字段、密碼(password)輸入字段和文本區域(textarea)字段置空,清除任何select元素中的選定,以及將所有的單選(radio)按鈕和多選(checkbox)按鈕重置爲非選定狀態。
可鏈接(Chainable):可以。

實例:

$('#myFormId').clearForm(); 

8. clearFields

清除字段元素。只有部分表單元素需要清除時才方便使用。
可鏈接(Chainable):可以。

實例:

$('#myFormId .specialFields').clearFields(); 

9. Options對象

ajaxForm和ajaxSubmit都支持衆多的選項參數,這些選項參數可以使用一個Options對象來提供。Options只是一個JavaScript對象,它包含了如下一些屬性與值的集合:

9.1 target
指明頁面中由服務器響應進行更新的元素。元素的值可能被指定爲一個jQuery選擇器字符串,一個jQuery對象,或者一個DOM元素。
默認值:null。
9.2 url
指定提交表單數據的URL。
默認值:表單的action屬性值
9.3 type
指定提交表單數據的方法(method):“GET”或“POST”。
默認值:表單的method屬性值(如果沒有找到默認爲“GET”)。
9.4 beforeSubmit
表單提交前被調用的回調函數。“beforeSubmit”回調函數作爲一個鉤子(hook),被提供來運行預提交邏輯或者校驗表單數據。如果 “beforeSubmit”回調函數返回false,那麼表單將不被提交。“beforeSubmit”回調函數帶三個調用參數:數組形式的表單數 據,jQuery表單對象,以及傳入ajaxForm/ajaxSubmit中的Options對象。表單數組接受以下方式的數據:

[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ] 

默認值:null
9.5 success
表單成功提交後調用的回調函數。如果提供“success”回調函數,當從服務器返回響應後它被調用。然後由dataType選項值決定傳回responseText還是responseXML的值。
默認值:null
9.6 dataType
期望返回的數據類型。null、“xml”、“script”或者“json”其中之一。dataType提供一種方法,它規定了怎樣處理服務器的響應。這個被直接地反映到jQuery.httpData方法中去。下面的值被支持:
'xml':如果dataType == 'xml',將把服務器響應作爲XML來對待。同時,如果“success”回調方法被指定, 將傳回responseXML值。
'json':如果dataType == 'json', 服務器響應將被求值,並傳遞到“success”回調方法,如果它被指定的話。
'script':如果dataType == 'script', 服務器響應將求值成純文本。
(譯註:上面一些地方鬼佬說的不清不楚,只好意譯了,希望能夠表達原意。)
默認值:null(服務器返回responseText值)

9.7 semantic
Boolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the normal form serialization is done in semantic order with the exception of input elements of type="image". You should only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of type="image".
布爾標誌,表示數據是否必須嚴格按照語義順序(slower?)來進行提交。注意:一般來說,表單已經按照語義順序來進行了串行化(或序列化),除了 type="image"的input元素。如果你的服務器有嚴格的語義要求,以及表單中包含有一個type="image"的input元素,就應該將 semantic設置爲true。(譯註:這一段由於無法理解,翻譯出來可能語不達意,但請達人指正。)
默認值:false
9.8 resetForm
布爾標誌,表示如果表單提交成功是否進行重置
Default value: null
9.9 clearForm
布爾標誌,表示如果表單提交成功是否清除表單數據。
默認值:null
實例:

// 準備好Options對象
var options = {
    target: '#divToUpdate',
    url: 'comment.php',
    success: function() {
    alert('Thanks for your comment!');
} };
// 將options傳給ajaxForm
$('#myForm').ajaxForm(options); 

注意:Options對象還可以用來將值傳遞給jQuery的$.ajax方法。如果你熟悉$.ajax所支持的options,你可以利用它們來將Options對象傳遞給ajaxForm和ajaxSubmit。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章