使用HTML5 FormData接口更轻松的AJAX

通过Ajax处理表单的

>对单页应用程序和进行性增强至关重要。 让我们检查一个典型的形式：

<code class="language-html"><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></code>

jQuery简化了AJAX的数据序列化形式：

>

<code class="language-javascript">$("#myform").on("submit", function(e) {
  e.preventDefault();
  $.post(this.action, $(this).serialize());
});</code>

>普通的JavaScript需要手动数据提取：

<code class="language-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);
};</code>

但是，HTML5

接口显着简化了此过程：> FormData

这个简洁的代码比jQuery等效更快，更可读。

<code class="language-javascript">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);
};</code>

>自动处理编码。 它使用

，启用文件上传。 您也可以手动附加数据：FormData multipart/form-data

>文件或斑点可以用可选的文件名附加。

<code class="language-javascript">var formData = new FormData();
formData.append("name", "value");
formData.append("a", 1);
formData.append("b", 2);</code>

>享受广泛的浏览器支持，不包括非常古老的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中文网其他相关文章！