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

2019-11-20 09:38:58

字体：大中小

来源：转载

供稿：网友

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

jQuery的ajax普通封装

var ajaxFn = function(uri, data, cb) {$.ajax({url: uri,type: 'POST',dataType: 'json',data: data,}).done(cb).fail(function() {console.log("error");}).always(function() {console.log("complete");});}

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

var ajaxHdFn = function(uri, data, cb) {var getXmlHttpRequest = function() {if (window.XMLHttpRequest) {//主流浏览器提供了XMLHttpRequest对象return new XMLHttpRequest();} else if (window.ActiveXObject) {//低版本的IE浏览器没有提供XMLHttpRequest对象//所以必须使用IE浏览器的特定实现ActiveXObjectreturn new ActiveXObject("Microsoft.XMLHttpRequest");}};var xhr = getXmlHttpRequest();xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {//获取成功后执行操作//数据在xhr.responseTextvar 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

var ajaxStrFn = function(uri, data, cb) {var getXmlHttpRequest = function() {if (window.XMLHttpRequest) {//主流浏览器提供了XMLHttpRequest对象return new XMLHttpRequest();} else if (window.ActiveXObject) {//低版本的IE浏览器没有提供XMLHttpRequest对象//所以必须使用IE浏览器的特定实现ActiveXObjectreturn new ActiveXObject("Microsoft.XMLHttpRequest");}};var xhr = getXmlHttpRequest();xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {//获取成功后执行操作//数据在xhr.responseTextvar 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/x-www-form-urlencoded;charset=UTF-8");var dataStr = '';for (var i in data) {if (dataStr) {dataStr += '&';}dataStr += i + '=' + data[i];}xhr.send(dataStr);}

原生ajax封装，设置header，传上传excel文件，提交表单

var ajaxFormFn = function(uri, formObj, cb) {console.log('formObj---', formObj);var getXmlHttpRequest = function() {if (window.XMLHttpRequest) {//主流浏览器提供了XMLHttpRequest对象return new XMLHttpRequest();} else if (window.ActiveXObject) {//低版本的IE浏览器没有提供XMLHttpRequest对象//所以必须使用IE浏览器的特定实现ActiveXObjectreturn new ActiveXObject("Microsoft.XMLHttpRequest");}};var xhr = getXmlHttpRequest();xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {//获取成功后执行操作//数据在xhr.responseTextvar 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.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文件上传提交表单(推荐)的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：关于JS中setTimeout()无法调用带参函数问题的解决方法

下一篇：jQuery动态添加可拖动元素完整实例(附demo源码下载)