Bagaimana untuk Menghantar Data FormData dan String dalam Permintaan AJAX JQuery?

Bagaimanakah untuk Menghantar Kedua-dua FormData dan Data String Melalui JQuery AJAX?

Apabila bekerja dengan borang yang mengandungi kedua-dua input fail dan medan input tersembunyi, anda mungkin menghadapi kesukaran menghantar kedua-duanya set data bersama-sama menggunakan FormData(). Artikel ini menyediakan penyelesaian kepada masalah ini.

Dalam FormData, anda boleh menambahkan data fail menggunakan kaedah fd.append("file", file_data). Walau bagaimanapun, untuk memasukkan data input tersembunyi bersama-sama dengan fail, anda perlu menggunakan langkah berikut:

1. Gunakan $('form').serializeArray() untuk mendapatkan tatasusunan objek yang mewakili setiap medan input dan nilainya.
2. Lelar melalui tatasusunan dan tambahkan setiap nama dan nilai medan pada objek FormData menggunakan fd.append(input.name,input.value).

Sebagai contoh, pertimbangkan kod HTML:

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

Dan kod JQuery/Ajax 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>

Kod ini mula-mula mendapatkan fail daripada input dan menambahkannya pada objek FormData . Ia kemudiannya memperoleh nilai daripada medan input tersembunyi menggunakan serializeArray() dan menambahkannya pada objek FormData juga. Akhir sekali, data dihantar ke pelayan menggunakan permintaan Ajax.

Dengan mengikuti langkah ini, anda boleh berjaya menghantar kedua-dua FormData dan data rentetan bersama-sama melalui JQuery AJAX, memastikan semua data yang diperlukan dihantar bersama permintaan.

Atas ialah kandungan terperinci Bagaimana untuk Menghantar Data FormData dan String dalam Permintaan AJAX JQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!