jQuery:serialize()フォームとその他のパラメーター


114

単一のAJAXリクエストでフォーム要素(.serialize()メソッドでシリアル化)およびその他のパラメーターを送信することは可能ですか?

例:

$.ajax({
    type : 'POST',
    url : 'url',
    data : {
        $('#form').serialize(),
        par1 : 1,
        par2 : '2',
        par3: 232
    }
}

そうでない場合、フォームを他のパラメーターと一緒に送信する最良の方法は何ですか?

ありがとう

回答:


235

serialize() フォームの値を有効なクエリ文字列に効果的に変換します。そのため、文字列に単純に追加できます。

$.ajax({
    type : 'POST',
    url : 'url',
    data : $('#form').serialize() + "&par1=1&par2=2&par3=232"
}

7
@ファルコンココナッツの意味は?
Shafizadeh

1を変数に変更する方法
Slatan-ko

3
@Shafizadehその韻(alot-coconut)
Adam

ここでcontentTypeが必要ない理由を教えてください。デフォルトで追加されますか?
kernal lora 2016

はい、URLエンコードされたフォームがデフォルトです。詳細については、jqueryのドキュメントを参照してください
Rory McCrossan

77

または、パラメータをオブジェクト変数に格納する場合にform.serialize()withを使用でき$.param(object)ます。使用法は次のとおりです。

var data = form.serialize() + '&' + $.param(object)

詳細については、http://api.jquery.com/jQuery.paramを参照してください


10
私はこれが好きです。これは、醜いクエリ文字列を見る必要がないことを意味します。
グレッグウッズ

4
これははるかに良い方法です。受け入れられた答えは厄介であり、いかなる実動アプリケーションでも使用すべきではありません。
FastTrack

3
本番環境について話している場合は、これらの答えは使用しないでください。にformは、1回の呼び出しでシリアル化できるように、すべての情報が(必要に応じて非表示フィールドに)含まれている必要があります。このようにして、JSが無効または失敗した場合でも、フォーム送信にはフェイルセーフがあり、送信時にすべてのデータを含める必要があります。
Rory McCrossan 2016年

9

私は知りませんが、上記のどれも私にとってはうまくいきませんでした、そして私はこれを使ってそれはうまくいきました:

フォームのシリアル化された配列では、キーと値のペアとして格納されます

ここでフォーム変数に新しい値をプッシュし、この変数を直接渡すことができます。

var form = $('form.sigPad').serializeArray();
var uniquekey = {
      name: "uniquekey",
      value: $('#UniqueKey').val()
};
form.push(uniquekey);

1

フォームシリアライズでデータを送信したい場合は、これを試すことができます

var form= $("#formId");
$.ajax({
    type: form.attr('method'),
    url: form.attr('action'),
    data: form.serialize()+"&variable="+otherData,
    success: function (data) {
    var result=data;
    $('#result').attr("value",result);

    }
});

0

このようなパラメータの値を渡す

data : $('#form_id').serialize() + "&parameter1=value1&parameter2=value2"

等々。


0

Rory McCrossanの回答に従って、整数の配列(ほとんど.NETの場合)を送信する場合、これはコードです。

// ...

url: "MyUrl",       //  For example --> @Url.Action("Method", "Controller")
method: "post",
traditional: true,  
data: 
    $('#myForm').serialize() +
    "&param1="xxx" +
    "&param2="33" +
    "&" + $.param({ paramArray: ["1","2","3"]}, true)
,             

// ...

-1

別のフォームのコンテンツでjQueryを使用して補助フォームを作成し、他のフォームにそのフォームを追加して、ajax呼び出しでシリアル化するだけで済みます。

function createInput(name,value){
    return $('<input>').attr({
        name: name,
        value: value
    });
}
$form = $("<form></form>");
$form.append($("#your_form input").clone());
$form.append(createInput('input_name', 'input_value'));
$form.append(createInput('input_name_2', 'input_value_2'));
....

$.ajax({
    type : 'POST',
    url : 'url',
    data : $form.serialize()
}

-1

アンダーステートメントで問題を修正しました。同じGETメソッドを使用してデータを送信する

$.ajax({
    url: 'includes/get_ajax_function.php?value=jack&id='+id,
    type: 'post',
    data: $('#b-info1').serializeArray(),

$_REQUEST['value']ORで値を取得する$_GET['id']


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.