Cara Menghantar Data FormData dan String Serentak Menggunakan JQuery AJAX

Menghantar FormData dan Data Rentetan Secara Serentak Melalui JQuery AJAX

Mengirimkan kedua-dua data fail dan data rentetan input biasa melalui satu permintaan AJAX boleh dicapai dengan FormData(). Sebagai contoh, anda mungkin mempunyai berbilang medan input tersembunyi yang anda ingin sertakan dalam permintaan pelayan bersama data fail.

Pertimbangkan borang HTML berikut:

<code class="html"><form action="image.php" method="post" enctype="multipart/form-data">
<input type="file" name="file[]" multiple="" />
<input type="hidden" name="page_id" value="<?php echo $page_id; ?>"/>
<input type="hidden" name="category_id" value="<?php echo $item_category->category_id; ?>"/>
<input type="hidden" name="method" value="upload"/>
<input type="hidden" name="required[category_id]" value="Category ID"/>
</form></code>

Menggunakan kod JQuery berikut , bagaimanapun, hanya data fail sedang dihantar, meninggalkan data input tersembunyi:

<code class="jquery">// HTML5 form data object.
var fd = new FormData();

var file_data = object.get(0).files[i];
var other_data = $('form').serialize(); // page_id=&amp;category_id=15&amp;method=upload&amp;required%5Bcategory_id%5D=Category+ID

fd.append("file", file_data);

$.ajax({
    url: 'add.php',
    data: fd,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});</code>

Kunci untuk memasukkan kedua-dua fail dan data rentetan dalam FormData() terletak pada mengubah suai kod JQuery seperti berikut:

<code class="javascript">var fd = new FormData();
var file_data = $('input[type="file"]')[0].files; // for multiple files
for(var i = 0;i<file_data.length;i++){
    fd.append("file_"+i, file_data[i]);
}
var other_data = $('form').serializeArray();
$.each(other_data,function(key,input){
    fd.append(input.name,input.value);
});
 $.ajax({
    url: 'test.php',
    data: fd,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
        console.log(data);
    }
});</code>

Pengubahsuaian memperkenalkan gelung for yang mengendalikan berbilang input fail dan menukar .serialize() kepada .serializeArray() untuk mendapatkan tatasusunan objek untuk manipulasi dalam gelung .each(), di mana data boleh ditambahkan pada FormData().

Atas ialah kandungan terperinci Cara Menghantar Data FormData dan String Serentak Menggunakan JQuery AJAX. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!