全球化服务

0755-82326831

获取免费方案

全部

网站建设常识

网站建设常见问题

网站SEO常识

网站开发常识

域名空间常识

首页 > 网站建设常识 > HTML5 FormData简便完结Ajax表单提交

HTML5 FormData简便完结Ajax表单提交

网站建设专家

运用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);

本文来源于增长超人网站建设公司

一起聊聊您的项目?

联系我们

获取方案

贵公司的网址是?

如何称呼您?*

您的联系方式是?*

留言

您将免费获得

  • 1

    全面诊断网站

    您将获得专家对您网站的全面诊断服务。我们不同于传统建站公司他们大多“免费检查”仅是一些通用的、浅显的建议。

  • 2

    找出可能让您错过的增长点

    我们将挖掘出有利于转化率提升而您网站却达不到的指标,诊断报告还将详细说明您网站可以改善的确切地方。

  • 3

    流量查询与分析

    我们通过专业手段,为您提供您所在行业的流量增长趋势与流量来源分析。

  • 4

    定制方案与报价

    对您的需求深入了解后,并结合您所处行业的竞争分析结果,我们将为您量身定制一份增长方案。

下一步

贵公司预算范围是?

贵公司的团队规模是?

目前主要的营销渠道是?

从哪里了解到我们?

免费预约

贵公司的网址是?

如何称呼您?*

您的联系方式是?*

留言

立即提交

扫描二维码

关注公众号

回复【数字营销】即可获取白皮书

book

免费获取《2022数字营销白皮书》

扫描二维码 回复【数字营销】免费获取

code

马上来一场关于您的项目探讨会?

免费预约 >

我们的服务已触达

全国20多个省份乃至海外

中国

深圳、上海、北京、广州、香港、成都、重庆、杭州、武汉、西安、天津、苏州、南京、郑州、长沙、沈阳、青岛、合肥、佛山、南昌、台湾、昆明、海口、厦门...

海外

美国、加拿大、新加坡、日本、韩国、俄罗斯、法国、英国、德国、意大利、澳大利亚、沙特阿拉伯、新西兰、荷兰...

合作咨询
请通过表单提交合作咨询信息,我们会尽快与您取得联系。

我们的服务已触达

全国20多个省份乃至海外

中国

深圳、上海、北京、广州、香港、成都、重庆、杭州、武汉、西安、天津、苏州、南京、郑州、长沙、沈阳、青岛、合肥、佛山、南昌、台湾、昆明、海口、厦门...

海外

美国、加拿大、新加坡、日本、韩国、俄罗斯、法国、英国、德国、意大利、澳大利亚、沙特阿拉伯、新西兰、荷兰...

合作咨询 0755-82326831
请通过表单提交合作咨询信息,我们会尽快与您取得联系。