原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)
更新時間：2016年06月21日 10:30:19 作者：WoodK
這篇文章主要介紹了原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
由于項目中需要在提交ajax前設置header信息，jquery的ajax實現(xiàn)不了，我們自己封裝幾個常用的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瀏覽器的特定實現(xiàn)ActiveXObject
return new ActiveXObject("Microsoft.XMLHttpRequest");
}
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
//獲取成功后執(zhí)行操作
//數(shù)據(jù)在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瀏覽器的特定實現(xiàn)ActiveXObject
return new ActiveXObject("Microsoft.XMLHttpRequest");
}
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
//獲取成功后執(zhí)行操作
//數(shù)據(jù)在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瀏覽器的特定實現(xiàn)ActiveXObject
return new ActiveXObject("Microsoft.XMLHttpRequest");
}
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
//獲取成功后執(zhí)行操作
//數(shù)據(jù)在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);
}
導入的實現(xiàn)部分是后端的事情。
我們這里需要提交一個excel文件，使用ajax。
并且需要設置ajax的頭信息。所以我們不使用封裝好的插件。用原生js來封裝一個ajaxFormFn() 方法。
這里用到兩個對象：
第一個對象：FormData
第二個對象：XMLHttpRequest
目前新版的Firefox 與 Chrome 等支持HTML5的瀏覽器完美的支持這兩個對象，但IE9尚未支持 FormData 對象，還在用IE6 ? 只能仰天長嘆....
有了這兩個對象，我們可以真正的實現(xiàn)Ajax方式上傳文件。
以上所述是小編給大家介紹的原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
vscode?對?typescript代碼調(diào)試的步驟
在VS?Code中，要對?TypeScript代碼進行調(diào)試，需要先編譯?TypeScript?代碼為JavaScript代碼，這篇文章主要介紹了vscode對typescript代碼調(diào)試的方法,需要的朋友可以參考下2023-03-03
利用js實現(xiàn)在瀏覽器狀態(tài)欄顯示訪問者在本頁停留的時間
本文為大家介紹下利用JavaScript實現(xiàn)在瀏覽器狀態(tài)欄顯示停留時間即在狀態(tài)欄上顯示訪問者在本頁停留的時間2013-12-12
這篇文章主要為大家詳細介紹了微信小程序日期選擇器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
在JavaScript中,Number類型是基于IEEE754雙精度浮點數(shù)標準表示的,雖然在常見場景下非常高效,但在處理大數(shù)據(jù)時,Number類型存在顯著的精度限制,在這些場景中,如何精確處理大數(shù)據(jù)和超大數(shù)字成為了一個重要的問題,所以本文給大家介紹了JavaScript超過Number最大值的解決方案2025-01-01
JavaScript中常用的五種數(shù)字千分位格式化方法
數(shù)字格式化是開發(fā)中經(jīng)常遇到的任務,特別是在需要為數(shù)字添加千分位符或控制小數(shù)位數(shù)時,以下是幾種常用的數(shù)字格式化方法,每種方法有其優(yōu)缺點,適用于不同的需求場景,感興趣的小伙伴跟著小編一起來看看吧2024-12-12
layUI使用layer.open,在content打開數(shù)據(jù)表格,獲取值并返回的方法
今天小編就為大家分享一篇layUI使用layer.open,在content打開數(shù)據(jù)表格,獲取值并返回的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了詳解微信小程序?qū)徍瞬煌ㄟ^的解決方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
最近學到一個有關深拷貝的實現(xiàn)方法,為加深印象,這里給大家分享一下,下面這篇文章主要給大家介紹了關于前端面試的底氣之實現(xiàn)一個深拷貝的相關資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了JavaScript邏輯And運算符，在JavaScript中，邏輯 AND 運算符用雙和號（&&）表示2015-12-12
jquery動態(tài)添加刪除div 具體實現(xiàn)
這篇文章介紹了jquery動態(tài)添加刪除div實現(xiàn)代碼，有需要的朋友可以參考一下2013-07-07