首页 > 其他分享 >奇妙的FormData对象

奇妙的FormData对象

时间:2022-11-19 11:45:01浏览次数:45  
标签:form 对象 FormData 奇妙 表单 xhr var

  FormData对象,使得我们可以在AJAX异步请求中,实现原先HTML表单自动封装数据并提交的能力。它的实现方式也非常简单。

  1. 表单属性非常干净,没有了action、method、enctype,需要注意的是要提交表单项的name是必须的

    <form id="form">         <p>姓名:<input type="text" name="name"></p>         <p>年龄:<input type="text" name="age"></p>         <p><input type="button" value="提交" onclick="sub()"></p>     </form>   2. 表单的ajax发送   function sub() {             var form = document.getElementById('form');             var formdata = new FormData(form); // 将表单元素对象传入             var xhr = new XMLHttpRequest();             xhr.open('post', 'http://localhost:3000/formData'); // 必须采用post             xhr.send(formdata); // 发送Formdata对象             xhr.onload = function() {                 console.log(xhr.responseText);             };         }   3. 观察发送的request

  4. 小结,通过观察Content-Type,FormData对象天然支持文件上传

标签:form,对象,FormData,奇妙,表单,xhr,var
From: https://www.cnblogs.com/c431/p/16905748.html

相关文章