Ajax lebih mudah dengan antara muka HTML5 FormData

Penyerahan borang pengendalian melalui Ajax adalah penting untuk aplikasi satu halaman dan peningkatan progresif. Mari kita periksa bentuk biasa:

<form id="myform" action="webservice.php" method="post">
  <input type="email" name="email" />
  <select name="job">
    <option value="">Select Role</option>
    <option>web developer</option>
    <option>IT professional</option>
    <option>other</option>
  </select>
  <input type="checkbox" name="freelancer" /> are you a freelancer?
  <input type="radio" name="experience" value="4" /> less than 5 year's experience
  <input type="radio" name="experience" value="5" /> 5 or more year's experience
  <textarea name="comments" rows="3" cols="60"></textarea>
  <input type="submit" value="Submit">
</form>

jQuery memudahkan siri data borang untuk Ajax:

$("#myform").on("submit", function(e) {
  e.preventDefault();
  $.post(this.action, $(this).serialize());
});

Plain JavaScript memerlukan pengekstrakan data manual:

Walau bagaimanapun, antara muka HTML5

document.getElementById("myform").onsubmit = function(e) {
  e.preventDefault();
  var f = e.target, formData = '', xhr = new XMLHttpRequest();
  for (var i = 0, d, v; i < f.elements.length; i++) {
    d = f.elements[i];
    if (d.name && d.value) {
      v = (d.type == "checkbox" || d.type == "radio" ? (d.checked ? d.value : '') : d.value);
      if (v) formData += d.name + "=" + escape(v) + "&";
    }
  }
  xhr.open("POST", f.action);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
  xhr.send(formData);
};

menyelaraskan proses ini dengan ketara:

FormData

Kod ringkas ini lebih cepat dan lebih mudah dibaca daripada setara jQuery.

document.getElementById("myform").onsubmit = function(e) {
  e.preventDefault();
  var f = e.target, formData = new FormData(f), xhr = new XMLHttpRequest();
  xhr.open("POST", f.action);
  xhr.send(formData);
};

secara automatik mengendalikan pengekodan. Ia menggunakan

, membolehkan muat naik fail. Anda juga boleh menambah data secara manual: FormData multipart/form-data

Fail atau gumpalan boleh dilampirkan dengan nama fail pilihan.

var formData = new FormData();
formData.append("name", "value");
formData.append("a", 1);
formData.append("b", 2);

menikmati sokongan penyemak imbas yang luas, tidak termasuk versi IE yang sangat lama. Untuk maklumat lanjut, rujuk rujukan

dan dokumentasi MDN. FormData FormData soalan yang sering ditanya mengenai antara muka HTML5 FormData dan Ajax

Apakah antara muka HTML5 FormData dan bagaimana ia berfungsi dengan Ajax?

antara muka HTML5

memudahkan membuat pasangan nilai utama yang mewakili data borang untuk permintaan AJAX. Ajax membolehkan pertukaran data tak segerak dengan pelayan, mengemas kini laman web tanpa tambah nilai penuh.

FormData bagaimana saya boleh membuat objek FormData?

Gunakan

untuk objek kosong atau

untuk membuat satu dari elemen bentuk. new FormData() new FormData(formElement) bagaimana saya boleh menambah data ke objek FormData?

Gunakan kaedah

.

append(name, value) bagaimana saya boleh menghantar objek FormData dengan permintaan Ajax?

Gunakan

. Header

secara automatik ditetapkan ke xhr.send(formData). Content-Type multipart/form-data Bolehkah saya menggunakan antara muka FormData dengan kaedah Ajax JQuery?

ya, tetapi tetapkan

dan

. processData: false contentType: false bagaimana saya boleh menyemak sama ada penyemak imbas menyokong antara muka FormData?

Gunakan

.

if ("FormData" in window) { ... } Bolehkah saya menggunakan antara muka FormData untuk menghantar fail?

ya, tambah

atau

objek. File Blob Bolehkah saya memadam data dari objek FormData?

Ya, gunakan kaedah

.

delete(name) Bolehkah saya melelehkan data dalam objek FormData?

ya, gunakan

,

, entries(), atau keys(). values() forEach() bolehkah saya menggunakan antara muka formdata dengan mengambil?

ya, lulus sebagai

permintaan

. body

Atas ialah kandungan terperinci Ajax lebih mudah dengan antara muka HTML5 FormData. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!