jQuery post () dengan serialisasi dan data tambahan

147

Saya mencoba mencari tahu apakah mungkin untuk memposting serialize()dan data lain di luar formulir.

Inilah yang saya pikir akan berhasil, tetapi hanya mengirim 'wordlist'dan bukan data formulir.

$.post("page.php",( $('#myForm').serialize(), { 'wordlist': wordlist }));

Adakah yang punya ide?

javascript jquery

— Vitaliy Isikov
sumber

329

Anda dapat menggunakan serializeArray ^[dokumen] dan menambahkan data tambahan:

var data = $('#myForm').serializeArray();
data.push({name: 'wordlist', value: wordlist});

$.post("page.php", data);

— Felix Kling
sumber

11

Hmm. Saya pikir saya suka ini lebih baik daripada solusi saya :) Saya mungkin mulai melakukan ini di masa depan.

— Michael Mior

@ Gatradain: Ini berfungsi dengan baik: jsfiddle.net/fnjncqhv . Jika tidak berhasil, Anda menghadapi masalah yang berbeda.

— Felix Kling

Tidak, tidak. jsfiddle.net/fnjncqhv/1 berseri sisi server. Harap edit jawaban Anda untuk memperbaiki masalah.

— Gudradain

2

@ Gatradain: Silakan lihat komentar saya pada jawaban Anda. Anda salah. serializeArraytidak menghasilkan struktur yang Anda pikirkan. Saya tidak yakin apa yang Anda coba tampilkan dengan demo Anda. Anda hanya mengingatkan panjang array. Jika demo saya tidak meyakinkan Anda, silakan lihat dokumentasi .

— Felix Kling

1

@ Feliksling Maaf untuk saat gagal itu dan terima kasih atas penjelasannya. Tidak menyadari bahwa Anda benar-benar membutuhkan format {name: 'your-paramater-name', value: 'your-parameter-value'}, untuk setiap parameter yang ingin Anda tambahkan.

— Gudradain

55

Coba $ .param

$.post("page.php",( $('#myForm').serialize()+'&'+$.param({ 'wordlist': wordlist })));

— Michael Mior
sumber

3

Ini solusi terbaik!

— Ivijan Stefan Stipić

9

Solusi alternatif, jika Anda perlu melakukan ini pada unggah file ajax:

var data = new FormData( $('#form')[0] ).append( 'name' , value );

ATAU bahkan lebih sederhana.

$('form').on('submit',function(e){

    e.preventDefault();
    var data = new FormData( this ).append('name', value );

    // ... your ajax code here ...

    return false;

});

— r3wt
sumber

5

Saat Anda ingin menambahkan objek javascript ke data formulir, Anda bisa menggunakan kode berikut

var data = {name1: 'value1', name2: 'value2'};
var postData = $('#my-form').serializeArray();
for (var key in data) {
    if (data.hasOwnProperty(key)) {
        postData.push({name:key, value:data[key]});
    }
}
$.post(url, postData, function(){});

Atau jika Anda menambahkan metode serializeObject () , Anda dapat melakukan hal berikut

var data = {name1: 'value1', name2: 'value2'};
var postData = $('#my-form').serializeObject();
$.extend(postData, data);
$.post(url, postData, function(){});

— Gudradain
sumber

1

Ini pada dasarnya akan menghasilkan array yang terlihat seperti [{name: 'wordlist'}, {value: wordlist}]. Itu tidak dalam format yang dimengerti jQuery, jadi saya ragu ini benar-benar berfungsi.

— Felix Kling

@FelixKling serializeArray () menghasilkan [{name1: 'value1'}, {name2: 'value2'}]. Jika Anda memiliki data objek {name3: 'value3', name4: 'value4'} dan mendorongnya ke dalam array dari serializeArray (), Anda mendapatkan [{name1: 'value1'}, {name2: 'value2'}, { name3: 'value3', name4: 'value4'}]. Objek terakhir dalam array tidak valid dan Anda tidak akan mendapatkan hasil.

— Gudradain

" serializeArray()menghasilkan [{name1: 'value1'}, {name2: 'value2'}]." Tidak, itu tidak: jsfiddle.net/akyz1Lcy

— Felix Kling

4

Di versi baru jquery, bisa dilakukan melalui langkah-langkah berikut:

dapatkan param array via serializeArray()
panggilan push() atau metode serupa untuk menambahkan params tambahan ke array,
panggilan $.param(arr)untuk mendapatkan string serial, yang dapat digunakan sebagai dataparameter jquery ajax .

Kode contoh:

var paramArr = $("#loginForm").serializeArray();
paramArr.push( {name:'size', value:7} );
$.post("rest/account/login", $.param(paramArr), function(result) {
    // ...
}

— Eric Wang
sumber

3

$.ajax({    
    type: 'POST',  
    url: 'test.php',  
    data:$("#Test-form").serialize(),  
    dataType:'json',
     beforeSend:function(xhr, settings){
     settings.data += '&moreinfo=MoreData';
     },
    success:function(data){
            //  json response  
    },
    error: function(data) { 
        // if error occured
    }
    });

— Ganesan Murugesan
sumber

2

Anda bisa meminta formulir berisi data tambahan sebagai bidang tersembunyi yang akan Anda atur tepat sebelum mengirim permintaan AJAX ke nilai yang sesuai.

Kemungkinan lain adalah menggunakan permata kecil ini untuk membuat cerita bersambung bentuk Anda menjadi objek javascript (bukan string) dan menambahkan data yang hilang:

var data = $('#myForm').serializeObject();
// now add some additional stuff
data['wordlist'] = wordlist;
$.post('/page.php', data);

— Darin Dimitrov
sumber

Tidak ada fungsi yang ada bernama serializeObject. Di mana Anda mendapatkan itu?

— Jereme Causing

1

Anda bisa menggunakan ini

var data = $("#myForm").serialize();
data += '&moreinfo='+JSON.stringify(wordlist);

— Marouane B.
sumber

0

Saya suka menyimpan objek sebagai objek dan tidak melakukan pemindahan jenis yang gila. Ini cara saya

var post_vars = $('#my-form').serializeArray();
$.ajax({
  url: '//site.com/script.php',
  method: 'POST',
  data: post_vars,
  complete: function() {
    $.ajax({
      url: '//site.com/script2.php',
      method: 'POST',
      data: post_vars.concat({
        name: 'EXTRA_VAR',
        value: 'WOW THIS WORKS!'
      })
    });
  }
});

jika Anda tidak dapat melihat dari atas, saya menggunakan fungsi .concat dan mengirimkan objek dengan variabel post sebagai 'name' dan nilainya sebagai 'value'!

Semoga ini membantu.

— AA Karim
sumber