web-dev-qa-db-ja.com

$（this）.serialize（）-値を追加する方法

現在、私は次のものを持っています：

$.ajax({
    type: 'POST',
    url: this.action,
    data: $(this).serialize(),
});

これはうまくいきますが、データに値を追加したいので、試しました

$.ajax({
    type: 'POST',
    url: this.action,
    data: $(this).serialize() + '&=NonFormValue' + NonFormValue,
});

しかし、それは正しく投稿されませんでした。シリアル化文字列にアイテムを追加する方法に関するアイデアはありますか？これは、フォーム固有ではないグローバルページ変数です。

serializationjquery
92
TheExit

の代わりに

 data: $(this).serialize() + '&=NonFormValue' + NonFormValue,

あなたはおそらく欲しい

 data: $(this).serialize() + '&NonFormValue=' + NonFormValue,

NonFormValueの値に特殊文字が含まれている可能性がある場合は、URLエンコードに注意する必要があります。

88
matt b

Matt bの答えは機能しますが、.serializeArray()を使用してフォームデータから配列を取得し、変更し、jQuery.param()を使用してURLエンコードされたフォームに変換することもできます。このようにして、jQueryは追加データのシリアル化を処理します。

var data = $(this).serializeArray(); // convert form to array
data.Push({name: "NonFormValue", value: NonFormValue});
$.ajax({
    type: 'POST',
    url: this.action,
    data: $.param(data),
});
167
Leigh Brenecki

最初にアイテムを追加してからシリアル化します：

$.ajax({
    type: 'POST',
    url: this.action,
    data: $.extend($(this), {'NonFormValue': NonFormValue}).serialize()
});
6
Mrchief

第一にすべきではない

data: $(this).serialize() + '&=NonFormValue' + NonFormValue,

なる

data: $(this).serialize() + '&NonFormValue=' + NonFormValue,

次に、使用できます

url: this.action + '?NonFormValue=' + NonFormValue,

または、アクションにすでにパラメーターが含まれている場合

url: this.action + '&NonFormValue=' + NonFormValue,
6
Nikhil Bhandari

いつでもできることを忘れないでください：

<input type="hidden" name="NonFormName" value="NonFormValue" />

実際のフォームでは、ケースによってはコードに適している場合があります。

5
Jonathan

私たちは次のことができます：

data = $form.serialize() + "&foo=bar";

例えば：

var userData = localStorage.getItem("userFormSerializeData");
var userId = localStorage.getItem("userId");

$.ajax({
    type: "POST",
    url: postUrl,
    data: $(form).serialize() + "&" + userData + "&userId=" + userId,
    dataType: 'json',
    success: function (response) {
        //do something
    }
});
2
Tapeshwar

フォームデータを処理するための追加の関数を書くことができます。フォームのデータ値として非フォームデータを追加する必要があります。例を参照してください。

<form method="POST" id="add-form">
    <div class="form-group required ">
        <label for="key">Enter key</label>
        <input type="text" name="key" id="key"  data-nonformdata="hai"/>
    </div>
    <div class="form-group required ">
        <label for="name">Ente Name</label>
        <input type="text" name="name" id="name"  data-nonformdata="hello"/>
    </div>
    <input type="submit" id="add-formdata-btn" value="submit">
</form>

次に、フォーム処理のためにこのjqueryを追加します

<script>
$(document).onready(function(){
    $('#add-form').submit(function(event){
        event.preventDefault();
        var formData = $("form").serializeArray();
        formData = processFormData(formData);
        // write further code here---->
    });
});
processFormData(formData)
{
    var data = formData;
    data.forEach(function(object){
        $('#add-form input').each(function(){
            if(this.name == object.name){
                var nonformData = $(this).data("nonformdata");
                formData.Push({name:this.name,value:nonformData});
            }
        });
    });
    return formData;
}
0
Jithin Vijayan