html表单数据ajxa json传递,原生JS封装ajax 传json，str，excel文件上传提交表单(推荐)...

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

jQuery的ajax普通封装

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

获取成功后执行操作

//数据在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

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

获取成功后执行操作

//数据在xhr.responseText

var resJson = JSON.parse(xhr.responseText)

cb(resJson);

}

};

xhr.open("post","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文件上传提交表单(推荐)的相关知识。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！