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

前端技术 2023/09/07 JavaScript

由于项目中需要在提交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浏览器的特定实现ActiveXObject
return new ActiveXObject(\"Microsoft.XMLHttpRequest\");
}
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
//获取成功后执行操作
//数据在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

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

本文地址：https://www.stayed.cn/item/20166

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案