由于項目中需要在提交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瀏覽器的特定實現ActiveXObjectreturn new ActiveXObject("Microsoft.XMLHttpRequest");}};var xhr = getXmlHttpRequest();xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {//獲取成功后執行操作//數據在xhr.responseTextvar 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瀏覽器的特定實現ActiveXObjectreturn new ActiveXObject("Microsoft.XMLHttpRequest");}};var xhr = getXmlHttpRequest();xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {//獲取成功后執行操作//數據在xhr.responseTextvar 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瀏覽器的特定實現ActiveXObjectreturn new ActiveXObject("Microsoft.XMLHttpRequest");}};var xhr = getXmlHttpRequest();xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {//獲取成功后執行操作//數據在xhr.responseTextvar 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文件上傳提交表單(推薦)的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
