原生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 相关文章推荐
javascript TextArea动态显示剩余字符
Oct 22 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
Underscore源码分析
Dec 30 Javascript
js实现上传图片及时预览
May 07 Javascript
灵活使用数组制作图片切换js实现
Jul 28 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
详解JVM系列之内存模型
Jun 10 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
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
Python字符串处理之count()方法的使用
2015/05/18 Python
Python中title()方法的使用简介
2015/05/20 Python
django接入新浪微博OAuth的方法
2015/06/29 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
python实现图片彩色转化为素描
2019/01/15 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
电子银行营销方案
2014/02/22 职场文书
营销经理工作检讨书
2014/11/03 职场文书
初三语文教学计划
2015/01/22 职场文书
《角的度量》教学反思
2016/02/18 职场文书
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL