使用HTML5FormData轻便完成Ajax表单提交

2024-01-17    分类: 网站建设

用HTML5 FormData轻松完成Ajax表单提交 在我们的日常开发中,经常都会用到Ajax来提交表单。让我们来看一个典型的例子: <form id="myform" action="webservice.php" method="post"> <input type="email" name="email" /> <select name="job"> <option value="">角色</option> <option>web开发者</option> <option>IT工程师</option> <option>其他</option> </select> <input type="checkbox" name="freelancer" /> 你是自由职业吗? <input type="radio" name="experience" value="4" /> 不到5年经验 <input type="radio" name="experience" value="5" /> 5年及以上经验 <textarea name="comments" rows="3" cols="60"></textarea> <button type="submit">Submit</button> <form>

如果我们使用jQuery来提交这个表单的话,我们会像下面这样来提提交表单:

$("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();

// fetch form values 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);

}


现代Web应用中频繁使用的一项功能就是表单数据 的序列化,XMLHttpRequest 2级为此定义了FormData类型。FormData为序列化表单以及创建与表单格式相同的数据(用于通过XHR传输)提供了便利。下面的我们看看,通 过FormData对象,如何提交这个表单: 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); }

看看,是不是简单多了。同时,这也比jQuery更快、更容易阅读。 使用FormData的方便之处体现在不必明确地在XHR对象上设置请求头部。XHR对象能够识别传入的数据类型是FormData的实例,并配置适当的头部信息。 如果没有表单元素传递给构造函数,下面的代码创建了一个FormData对象,并向其中添加了一些数据。这个append()方法接收两个参数:键和值,分别对应表单字段的名字和字段中包含的值。可以像这样添加任意多个键值对儿。 var formData = new FormData(); formData.append("name", "value"); formData.append("a", 1); formData.append("b", 2);

支持FormData的浏览器有Firefox 4+、Safari 5+、Chrome和Android 3+版WebKit。

本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司!

标题名称:使用HTML5FormData轻便完成Ajax表单提交
URL链接:https://www.cdcxhl.com/news26/314076.html

成都网站建设公司_创新互联,为您提供ChatGPT微信小程序定制网站网站改版电子商务品牌网站制作

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

h5响应式网站建设