$ (this) .serialize () - Bagaimana cara menambahkan nilai?

105

saat ini saya memiliki yang berikut:

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

Ini berfungsi dengan baik, namun saya ingin menambahkan nilai ke data, jadi saya mencoba

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

Tapi itu tidak diposting dengan benar. Adakah ide tentang bagaimana Anda dapat menambahkan item ke string serialisasi? Ini adalah variabel halaman global yang tidak spesifik bentuk.

Keluar
sumber
Dapatkah Anda menjelaskan apa artinya "yang tidak diposting dengan benar"? Apa yang terjadi? Apa yang diterima oleh server?
matt b
6
Bukankah begitu '&NonFormValue=' + NonFormValue?
Wesley Murch

Jawaban:

103

Dari pada

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

Anda mungkin ingin

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

Anda harus berhati-hati untuk menyandikan URL nilai NonFormValuejika mungkin berisi karakter khusus.

matt b
sumber
1
gunakan encodeURIComponentuntuk memastikan bahwa NonFormValuetidak memiliki karakter khusus
Yahya Uddin
197

Meskipun jawaban matt b akan berfungsi, Anda juga dapat menggunakan .serializeArray()untuk mendapatkan larik dari data formulir, memodifikasinya, dan menggunakannya jQuery.param()untuk mengonversinya menjadi formulir yang dikodekan url. Dengan cara ini, jQuery menangani serialisasi data ekstra Anda untuk Anda.

var data = $(this).serializeArray(); // convert form to array
data.push({name: "NonFormValue", value: NonFormValue});
$.ajax({
    type: 'POST',
    url: this.action,
    data: $.param(data),
});
Leigh Brenecki
sumber
14
Ini jelas merupakan pilihan terbaik - menyerahkan sepenuhnya serialisasi ke jQuery, sambil tetap memiliki kemampuan untuk menambahkan nilai baru ke nilai yang diambil dari formulir.
jcsanyi
5
Ini adalah cara terbaik untuk melakukannya, tidak bermain dengan senar
Brett Gregson
Ini harus menjadi jawaban yang diterima. Bersih dan cara yang benar
Mike Aron
7

pertama-tama tidak boleh

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

menjadi

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

dan kedua, Anda bisa menggunakan

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

atau jika tindakan sudah berisi parameter apa pun

url: this.action + '&NonFormValue=' + NonFormValue,
Nikhil Bhandari
sumber
Jawaban kedua Anda tidak akan memiliki efek yang sama seperti pertanyaan yang ditanyakan; NonFormValueakan dikirim sebagai parameter URL, bukan dalam data POST. Ini mungkin tidak ideal jika a) apapun yang berjalan pada sisi server mengharapkannya untuk di-POSTING (misalnya menggunakan request.POSTalih-alih request.REQUESTdi Django), atau b) NonFormValueadalah sesuatu yang seharusnya tidak muncul di bilah URL atau riwayat baik untuk alasan keamanan atau karena itu adalah nilai sementara.
Leigh Brenecki
6

Tambahkan item terlebih dahulu dan kemudian buat serial:

$.ajax({
    type: 'POST',
    url: this.action,
    data: $.extend($(this), {'NonFormValue': NonFormValue}).serialize()
});
Mrchief
sumber
1
Tidak berhasil untuk saya juga. Meskipun benda itu meluas tetapi tidak berfungsi seperti yang diharapkan.
punitcse
5

Jangan lupa Anda selalu bisa melakukan:

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

dalam bentuk Anda yang sebenarnya, yang mungkin lebih baik untuk kode Anda tergantung pada kasusnya.

Jonathan
sumber
2

Kami dapat melakukan seperti:

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

Sebagai contoh:

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
    }
});
Tapeshwar
sumber
0

Anda dapat menulis fungsi tambahan untuk mengolah data formulir dan Anda harus menambahkan data nonform Anda sebagai nilai data di formulir. Lihat contoh:

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

Kemudian tambahkan jquery ini untuk pemrosesan formulir

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

Jithin Vijayan
sumber
0

ini lebih baik:

data: [$(this).serialize(),$.param({NonFormValue: NonFormValue})].join('&')
Eugene
sumber
Harap tambahkan penjelasan yang lebih rinci mengapa ini adalah pendekatan yang lebih baik.
Tandai
satu kode baris dan Anda dapat menggunakan objek json untuk parameter lainnya.
eugene