Einfacher AJAX mit der HTML5 -Formdata -Schnittstelle

Handhabungsformulareinreichungen über AJAX sind für einseitige Anwendungen und eine progressive Verbesserung von entscheidender Bedeutung. Untersuchen wir eine typische 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 vereinfacht die Formdatenserialisierung für AJAX:

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

Einfaches JavaScript erfordert manuelle Datenextraktion:

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

Die HTML5 FormData -Schinschnittstelle strömt diesen Prozess erheblich:

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

Dieser prägnante Code ist schneller und lesbarer als das JQuery -Äquivalent. FormData behandelt automatisch die Codierung. Es wird multipart/form-data verwendet, um Dateien -Uploads zu aktivieren. Sie können Daten auch manuell anhängen:

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

Dateien oder Blobs können mit optionalen Dateinamen angehängt werden. FormData genießt einen breiten Browserunterstützung, ohne nur sehr alte IE -Versionen. Weitere Informationen finden Sie in der Dokumentation FormData Referenz und MDN.

häufig gestellte Fragen zur HTML5 -Formdata -Schnittstelle und Ajax

Was ist die HTML5 -Formdata -Schnittstelle und wie funktioniert es mit AJAX?

Die HTML5-Schnittstelle vereinfacht das Erstellen von Schlüsselwertpaaren, die Formdaten für AJAX-Anforderungen darstellen. AJAX ermöglicht den asynchronen Datenaustausch mit dem Server und aktualisiert Webseiten ohne vollständige Nachladen. FormData

Wie kann ich ein Formdata -Objekt erstellen?

Verwenden Sie

für ein leeres Objekt oder new FormData(), um eines aus einem Formularelement zu erstellen. new FormData(formElement)

Wie kann ich Daten einem FormularData -Objekt anhängen?

Verwenden Sie die Methode

append(name, value)

Wie kann ich ein FormularData -Objekt mit einer AJAX -Anfrage senden?

Verwenden Sie

. Der xhr.send(formData) -Header wird automatisch auf Content-Type. multipart/form-data eingestellt

Kann ich die FormData -Schnittstelle mit der AJAX -Methode von JQuery verwenden?

Ja, aber setzen Sie

und processData: false. contentType: false

Wie kann ich überprüfen, ob ein Browser die FormData -Schnittstelle unterstützt?

Verwenden Sie

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

Kann ich die FormData -Schnittstelle verwenden, um Dateien zu senden?

Ja, append

oder File Objekte. Blob

Kann ich Daten aus einem FormularData -Objekt löschen?

Ja, verwenden Sie die Methode

delete(name)

Kann ich die Daten in einem Formdata -Objekt über die Daten iterieren?

Ja, verwenden Sie

, entries(), keys() oder values(). forEach()

Kann ich die FormData -Schnittstelle mit Fetch verwenden?

Ja, übergeben Sie es als

der body -Anforderung. fetch

Das obige ist der detaillierte Inhalt vonEinfacher AJAX mit der HTML5 -Formdata -Schnittstelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!