原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法。
jQuery的ajax普通封装
varajaxFn=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
varajaxHdFn=function(uri,data,cb){ vargetXmlHttpRequest=function(){ if(window.XMLHttpRequest){ //主流浏览器提供了XMLHttpRequest对象 returnnewXMLHttpRequest(); }elseif(window.ActiveXObject){ //低版本的IE浏览器没有提供XMLHttpRequest对象 //所以必须使用IE浏览器的特定实现ActiveXObject returnnewActiveXObject("Microsoft.XMLHttpRequest"); } }; varxhr=getXmlHttpRequest(); xhr.onreadystatechange=function(){ if(xhr.readyState===4&&xhr.status===200){ //获取成功后执行操作 //数据在xhr.responseText varresJson=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"); vardataStr=JSON.stringify(data); xhr.send(dataStr); }
原生ajax封装,设置header,传json
varajaxStrFn=function(uri,data,cb){ vargetXmlHttpRequest=function(){ if(window.XMLHttpRequest){ //主流浏览器提供了XMLHttpRequest对象 returnnewXMLHttpRequest(); }elseif(window.ActiveXObject){ //低版本的IE浏览器没有提供XMLHttpRequest对象 //所以必须使用IE浏览器的特定实现ActiveXObject returnnewActiveXObject("Microsoft.XMLHttpRequest"); } }; varxhr=getXmlHttpRequest(); xhr.onreadystatechange=function(){ if(xhr.readyState===4&&xhr.status===200){ //获取成功后执行操作 //数据在xhr.responseText varresJson=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"); vardataStr=''; for(variindata){ if(dataStr){ dataStr+='&'; } dataStr+=i+'='+data[i]; } xhr.send(dataStr); }
原生ajax封装,设置header,传上传excel文件,提交表单
varajaxFormFn=function(uri,formObj,cb){ console.log('formObj---',formObj); vargetXmlHttpRequest=function(){ if(window.XMLHttpRequest){ //主流浏览器提供了XMLHttpRequest对象 returnnewXMLHttpRequest(); }elseif(window.ActiveXObject){ //低版本的IE浏览器没有提供XMLHttpRequest对象 //所以必须使用IE浏览器的特定实现ActiveXObject returnnewActiveXObject("Microsoft.XMLHttpRequest"); } }; varxhr=getXmlHttpRequest(); xhr.onreadystatechange=function(){ if(xhr.readyState===4&&xhr.status===200){ //获取成功后执行操作 //数据在xhr.responseText varresJson=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文件上传提交表单(推荐)的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!