使用HTML5 FormData接口更輕鬆的AJAX

通過Ajax處理表單的

>對單頁應用程序和進行性增強至關重要。 讓我們檢查一個典型的形式：

<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簡化了AJAX的數據序列化形式：

>

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

>普通的JavaScript需要手動數據提取：

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

但是，HTML5

接口顯著簡化了此過程：> FormData

這個簡潔的代碼比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);
};

>自動處理編碼。 它使用

，啟用文件上傳。 您也可以手動附加數據：FormData multipart/form-data

>文件或斑點可以用可選的文件名附加。

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

>享受廣泛的瀏覽器支持，不包括非常古老的IE版本。 有關更多詳細信息，請諮詢

參考文檔和MDN文檔。 FormData> FormData關於HTML5 FormData接口和AJAX

的常見問題

html5 formdata接口是什麼，它如何與ajax一起使用？

> html5

接口簡化了創建代表AJAX請求形式數據的鍵值對。 AJAX可以通過服務器啟用異步數據交換，更新沒有完整重新加載的網頁。

FormData如何創建一個formdata對象？

>

>使用

對於空對像或

從表單元素創建一個。 new FormData()> new FormData(formElement)>如何將數據附加到formdata對象？

>

使用

>方法。

> append(name, value)>如何使用AJAX請求發送FormData對象？

使用

。

標頭自動設置為。

>。 xhr.send(formData)我可以使用JQuery的Ajax方法使用FormData接口？ Content-Type是的，但是設置multipart/form-data和

。

。

>如何檢查瀏覽器是否支持FormData接口？

> processData: false使用contentType: false。

>我可以使用FormData接口發送文件嗎？

是的，附加if ("FormData" in window) { ... }或

>對象。

>

我可以從formdata對象刪除數據嗎？

File是的，使用Blob>方法。

>我可以在formdata對像中迭代數據嗎？

>

是的，使用delete(name)，

，

或

。

>我可以使用fetch的formdata接口？ entries() keys()是的，將其作為values()>請求的forEach()>傳遞。

以上是使用HTML5 FormData接口更輕鬆的AJAX的詳細內容。更多資訊請關注PHP中文網其他相關文章！