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


Posted in Javascript onJune 21, 2016

由于项目中需要在提交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文件上传提交表单(推荐)的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 表格工具集
Apr 25 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
Javascript操作URL函数修改版
Nov 07 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 #Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 #Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 #Javascript
纯JS前端实现分页代码
Jun 21 #Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 #Javascript
jQuery代码性能优化的10种方法
Jun 21 #Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 #Javascript
You might like
MVC模式的PHP实现
2006/10/09 PHP
php+mysql分页代码详解
2008/03/27 PHP
用Zend Encode编写开发PHP程序
2010/02/21 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
Delphi笔试题
2016/11/14 面试题
大学生咖啡店创业计划书
2014/01/21 职场文书
西安交大自主招生自荐信
2014/01/27 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
2014年英语工作总结
2014/12/20 职场文书
专项资金申请报告
2015/05/15 职场文书
党员转正大会主持词
2015/07/02 职场文书
我的中国梦主题班会
2015/08/14 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
Python中异常处理用法
2021/11/27 Python
vue使用echarts实现折线图
2022/03/21 Vue.js
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技