JqueryのAJAXを使用して複雑なフォームを送信するには？

Question

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); 

をしかし、それは」doesnの具体的には、チェックボックスは正しく送信されません。どうすればそれを動作させることができますか？

Answer 1

これを行うには、プラグインの使用をお勧めします。このform plug-inをご覧ください。また、validation plug-inとうまく統合することができます。

Answer 2

フォームの値を取得するために各フィールドを反復処理する必要はありません。 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形式でデータを送ることを忘れないでください。

Answer 3

デフォルトの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); 

を...そしてDanitaによって提案されたように、$ .serializeを使用しています。