Memuat Turun Fail melalui POST dengan Data JSON dalam JavaScript/jQuery

Apabila bekerja dengan aplikasi web untuk tugas seperti memaparkan maklumat daripada pelayan, ia sering menjadi perlu untuk bukan sahaja menghantar data ke pelayan tetapi juga menerima respons. Walau bagaimanapun, kadangkala respons ini mungkin bukan teks ringkas atau JSON tetapi sebaliknya fail yang boleh dimuat turun.

Masalah: Mengendalikan Respons Fail Perduaan

Persoalan yang timbul menimbulkan cabaran untuk mengendalikan respons fail binari dalam JavaScript /jQuery. Isu timbul apabila pelayan mengembalikan fail yang boleh dimuat turun, seperti PDF, XLS atau format lain, sebagai tindak balas kepada permintaan POST yang mengandungi data JSON.

Pendekatan 1: Mencipta Iframe Tersembunyi

Satu pendekatan popular melibatkan mencipta elemen iframe tersembunyi dalam dokumen HTML. Iframe (singkatan untuk bingkai sebaris) boleh digunakan untuk membenamkan halaman web luaran dalam halaman web semasa anda. Dengan menetapkan atribut src iframe kepada URL yang dikembalikan oleh pelayan, anda boleh mencetuskan penyemak imbas untuk memuat turun fail.

Berikut ialah coretan kod yang menunjukkan pendekatan ini:

<code class="javascript">$.post('/create_binary_file.php', postData, function(retData) {
  var iframe = document.createElement("iframe");
  iframe.setAttribute("src", retData.url);
  iframe.setAttribute("style", "display: none");
  document.body.appendChild(iframe);
});</code>

Dalam kod ini, kami mula-mula mencipta elemen iframe dan menetapkan sumbernya kepada URL yang dikembalikan oleh pelayan (retData.url). Kami kemudian menyembunyikan iframe dengan menetapkan sifat gaya paparannya kepada tiada, memastikan ia tidak kelihatan dalam antara muka pengguna. Akhir sekali, kami menambahkan iframe pada badan dokumen HTML.

Pendekatan 2: Ubah Hala Lokasi Tetingkap

Pilihan lain ialah mengubah hala penyemak imbas ke URL fail yang boleh dimuat turun menggunakan window.location .href. Kaedah ini lebih mudah tetapi kurang elegan daripada pendekatan iframe, kerana ia mungkin mengakibatkan kelewatan atau gangguan yang ketara dalam pengalaman pengguna.

<code class="javascript">success: function(json,status) {
    window.location.href = json.url;
}</code>

Pertimbangan

Kedua-dua kaedah yang diterangkan mempunyai kaedah tersendiri kelebihan dan kekurangan. Pendekatan iframe lebih dipercayai dan memberikan lebih kawalan ke atas proses muat turun. Walau bagaimanapun, ia boleh menyusahkan dan mungkin tidak berfungsi dalam semua senario. Kaedah ubah hala lokasi tetingkap adalah lebih mudah tetapi kurang dipercayai dan mungkin mengganggu pengalaman pengguna.

Akhirnya, pendekatan terbaik untuk aplikasi anda akan bergantung pada keperluan dan kekangan khusus anda.

Atas ialah kandungan terperinci Bagaimana Mengendalikan Respons Fail Binari dalam JavaScript/jQuery Apabila Menghantar Data JSON melalui Permintaan POST?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!