由於項目中需要在提交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文件上傳提交表單(推薦)的相關知識,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!