Easier Ajax With the HTML5 FormData Interface

Handling form submissions via AJAX is crucial for single-page applications and progressive enhancement. Let's examine a typical form:

<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 simplifies form data serialization for AJAX:

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

Plain JavaScript requires manual data extraction:

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);
};

However, the HTML5 FormData interface streamlines this process significantly:

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);
};

This concise code is faster and more readable than the jQuery equivalent. FormData automatically handles encoding. It uses multipart/form-data, enabling file uploads. You can also append data manually:

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

Files or Blobs can be appended with optional filenames. FormData enjoys broad browser support, excluding only very old IE versions. For more details, consult the FormData reference and MDN documentation.

Frequently Asked Questions about HTML5 FormData Interface and AJAX

What is the HTML5 FormData Interface and how does it work with AJAX?

The HTML5 FormData interface simplifies creating key-value pairs representing form data for AJAX requests. AJAX enables asynchronous data exchange with the server, updating web pages without full reloads.

How can I create a FormData object?

Use new FormData() for an empty object or new FormData(formElement) to create one from a form element.

How can I append data to a FormData object?

Use the append(name, value) method.

How can I send a FormData object with an AJAX request?

Use xhr.send(formData). The Content-Type header is automatically set to multipart/form-data.

Can I use the FormData interface with jQuery’s AJAX method?

Yes, but set processData: false and contentType: false.

How can I check if a browser supports the FormData interface?

Use if ("FormData" in window) { ... }.

Can I use the FormData interface to send files?

Yes, append File or Blob objects.

Can I delete data from a FormData object?

Yes, use the delete(name) method.

Can I iterate over the data in a FormData object?

Yes, use entries(), keys(), values(), or forEach().

Can I use the FormData interface with fetch?

Yes, pass it as the body of the fetch request.

The above is the detailed content of Easier Ajax With the HTML5 FormData Interface. For more information, please follow other related articles on the PHP Chinese website!