原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)

由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法

jQuery的ajax普通封装

原生ajax封装,设置header,传json

获取成功后执行操作 //数据在xhr.responseText var resJson = JSON.parse(xhr.responseText) cb(resJson); } }; xhr.open("post",uri,true); xhr.setRequestHeader("DeviceCode","56"); xhr.setRequestHeader("Source","API"); xhr.setRequestHeader("Authentication","72b32a1f754ba1c09b3695e0cb6cde7f"); xhr.setRequestHeader("Content-Type","application/json"); var dataStr = JSON.stringify(data); xhr.send(dataStr); }

原生ajax封装,设置header,传json

获取成功后执行操作 //数据在xhr.responseText var resJson = JSON.parse(xhr.responseText) cb(resJson); } }; xhr.open("post","72b32a1f754ba1c09b3695e0cb6cde7f"); xhr.onload = function() { console.log("上传完成!"); }; xhr.send(formObj); }

导入的实现部分是后端的事情。

我们这里需要提交一个excel文件,使用ajax。

并且需要设置ajax的头信息。所以我们不使用封装好的插件。用原生js来封装一个ajaxFormFn() 方法

这里用到两个对象:

第一个对象:FormData

第二个对象:XMLHttpRequest

目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 FormData 对象,还在用IE6 ? 只能仰天长叹....

有了这两个对象,我们可以真正的实现Ajax方式上传文件

以上所述是小编给大家介绍的原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)的相关知识。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表单提交的返回...
AJAX 每日更新前端基础,如果觉得不错,点个star吧 😃 https://github.com/WindrunnerMax/E...
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSe...
很早就听闻ajax的名声,但是却一直不知道怎么用,今天自己捣鼓了一下,竟然会用了,哈哈哈哈。 为了防止...
需要在服务器上进行哈 jquery的ajax方法: // jquery请求 $.ajax({ url: "./server/slider.js...
Ajax函数封装ajax.js // Get / Post // 参数 get post // 是否异步 // 如何处理响应数据 // URL // var...