原生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下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 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
给多个地址发邮件的类
2006/10/09 PHP
基于php split()函数的用法详解
2013/06/05 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
php验证码生成器
2017/05/24 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
利用Python实现Windows定时关机功能
2017/03/21 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
python多线程http压力测试脚本
2019/06/25 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
俄罗斯商务邀请函
2014/01/26 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
小学英语教学随笔
2015/08/14 职场文书
学生病假条怎么写
2015/08/17 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android
python前后端自定义分页器
2022/04/13 Python
python神经网络ResNet50模型
2022/05/06 Python