摘要:利用对象,我们可以通过用一些键值对来模拟一系列表单控件,我们还可以使用的方法来异步的提交表单。与普通的相比,使用的最大优点就是我们可以异步上传二进制文件。
每次在向服务器提交文件对象数据是,总是需要借助各种三方插件来实现表单异步提交功能,还要为不同的界面去定制不同的插件css,相当繁琐。XMLHttpRequest Level 2 添加了一个新的接口——FormData。利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交表单。与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件。
话不多说直接上代码:
var formData = new FormData(); formData.append("template", that.template); formData.append("declare", that.declareData.declare); formData.append("self_intro", that.declareData.self_intro); formData.append("plan_name", that.declareData.plan_name); //$("#business_plan") 是一个file类型的input对象 formData.append("business_plan", $("#business_plan")[0].files[0]); var xhr = new XMLHttpRequest(); xhr.open("POST", url, true); xhr.setRequestHeader("Accept", "application/json"); xhr.send(formData); // 指定通信过程中状态改变时的回调函数 xhr.onreadystatechange = function () { // 通信成功时,状态值为4 var completed = 4; if (xhr.readyState === completed) { if (xhr.status === 200) { // 处理服务器发送过来的数据 var result = JSON.parse(xhr.responseText); //这里你可以随意的处理这个result对象了 //... } else {// 处理错误 alert("连接超时"); } } };
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/78999.html
摘要:简介业务做一个在线投票,给歌手投票。提交到当前页面的中达到效果。用户名密码注册总结在不使用对象的情况下,依然可以用来实现对后台服务器的请求,同时不带来页面刷新或者跳转。 ajax 简介 业务:做一个在线投票,给歌手投票。要求:无刷新,并且不允许使用XMLHttpRequest对象.分析:在XHR对象,没有流行之前,已经有了无刷新这种效果的方法. 从http角度看,可以利用204 No...
摘要:在表单提交时,浏览器会自动进行一系列的校验工作,没有通过校验的表单是无法提交到服务器的。而方法提交表单,会在请求中发送表单字段键值对。表单提交事件表单提交到服务器时,会触发事件。 上一篇主要温习了一下form表单的属性和表单元素,这一片主要讲解用JavaScript如何操作form。 表单操作 取值 用JavaScript操作表单,免不了会有取值赋值操作,比如有以下表单: ...
阅读 692·2021-07-25 21:37
阅读 3622·2019-08-30 15:55
阅读 2547·2019-08-30 15:54
阅读 1675·2019-08-30 15:44
阅读 3069·2019-08-30 15:44
阅读 826·2019-08-30 15:43
阅读 988·2019-08-29 15:36
阅读 3009·2019-08-29 10:58