如何使用JQuery的AJAX提交一個複雜的表單？

我想提交一個使用jquery的ajax表單。它有幾個文本框，一些複選框和多個選項的下拉列表（即可以選擇多個選項）。這裏如何使用JQuery的AJAX提交一個複雜的表單？

有人告訴我，我可以使用

$("input:checkbox[name=type]:checked")

然後得到所有選中的複選框的值，我可以循環通過上面的代碼返回的所有值，並將其分配給一個這樣的數組：

var types=new Array(); 

    $.each(cboxes, function() 
     { 
     types[types.length]=$(this).val(); 
     } 
    );

並嘗試使用此提交表單：

var someField=$("#someField").val(); 
var someField2=$("#someField2").val(); 
var data={field1 : someField, field2=someField2, s_types:types}; 
$.post("signup.php?type=p",types);

但是那並不是」工作，特別是複選框沒有得到正確提交。我怎樣才能使它工作？

來源

2009-02-26 Click Upvote

我建議使用插件來做到這一點。看看這個form plug-in。它也可以很好地整合到validation plug-in。

來源

2009-02-26 12:01:09 kgiannakakis

這是最好的主意。它也允許你通過ajax上傳文件。 – 2009-02-26 12:13:57

不需要遍歷每個字段來獲取表單值。 jQuery有一種將表單輸入序列化爲查詢字符串的方法。你可以這樣做：

$.ajax({ 
    url: "mybackend.php", 
    data: $("#myForm").serialize(), 
    success: function(e) { // do something on success }, 
    error: function(e) { // do something on error } 
});

請記住，JavaScript的帖子總是以UTF-8格式發送數據，因此可以肯定你期待的是在後端，如果你打算使用國際字符發送文本。

來源

2009-02-26 12:05:58 Danita

默認的jQuery $.param不處理數組（by design），所以你不能像原來那樣使用$ .serialize。使用一個插件，像kgiannakis' answer建議，或覆蓋$ .PARAM功能，所以它會妥善處理數組：

function($) { 
    $.param = function(a) { 
    var s = []; 
    if (a.constructor == Array || a.jquery) 
     jQuery.each(a, function() { s.push(encodeURIComponent(this.name) + "=" + encodeURIComponent(this.value)); }); 
    else 
     for (var j in a) 
     if (a[j] && a[j].constructor == Array) jQuery.each(a[j], function(){ s.push(encodeURIComponent(j) + "[]=" + encodeURIComponent(this)); }); 
     else s.push(encodeURIComponent(j) + "=" + encodeURIComponent(a[j])); 
    return s.join("&").replace(/%20/g, "+"); 
    }; 
})(jQuery);

...然後使用$ .serialize，就像Danita建議。

來源

2009-02-26 12:16:36 kkyy

如何使用JQuery的AJAX提交一個複雜的表單？

回答

相關問題