快捷導(dǎo)航

原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)

更新時(shí)間：2016年06月21日 10:30:19 作者：WoodK

這篇文章主要介紹了原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

由于項(xiàng)目中需要在提交ajax前設(shè)置header信息，jquery的ajax實(shí)現(xiàn)不了，我們自己封裝幾個(gè)常用的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封裝，設(shè)置header，傳json

var ajaxHdFn = function(uri, data, cb) {
var getXmlHttpRequest = function() {
if (window.XMLHttpRequest) {
//主流瀏覽器提供了XMLHttpRequest對(duì)象
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
//低版本的IE瀏覽器沒(méi)有提供XMLHttpRequest對(duì)象
//所以必須使用IE瀏覽器的特定實(shí)現(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封裝，設(shè)置header，傳json

var ajaxStrFn = function(uri, data, cb) {
var getXmlHttpRequest = function() {
if (window.XMLHttpRequest) {
//主流瀏覽器提供了XMLHttpRequest對(duì)象
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
//低版本的IE瀏覽器沒(méi)有提供XMLHttpRequest對(duì)象
//所以必須使用IE瀏覽器的特定實(shí)現(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封裝，設(shè)置header，傳上傳excel文件，提交表單

var ajaxFormFn = function(uri, formObj, cb) {
console.log('formObj---', formObj);
var getXmlHttpRequest = function() {
if (window.XMLHttpRequest) {
//主流瀏覽器提供了XMLHttpRequest對(duì)象
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
//低版本的IE瀏覽器沒(méi)有提供XMLHttpRequest對(duì)象
//所以必須使用IE瀏覽器的特定實(shí)現(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);
}

導(dǎo)入的實(shí)現(xiàn)部分是后端的事情。

我們這里需要提交一個(gè)excel文件，使用ajax。

并且需要設(shè)置ajax的頭信息。所以我們不使用封裝好的插件。用原生js來(lái)封裝一個(gè)ajaxFormFn() 方法。

這里用到兩個(gè)對(duì)象：

第一個(gè)對(duì)象：FormData

第二個(gè)對(duì)象：XMLHttpRequest

目前新版的Firefox 與 Chrome 等支持HTML5的瀏覽器完美的支持這兩個(gè)對(duì)象，但I(xiàn)E9尚未支持 FormData 對(duì)象，還在用IE6 ? 只能仰天長(zhǎng)嘆....

有了這兩個(gè)對(duì)象，我們可以真正的實(shí)現(xiàn)Ajax方式上傳文件。

以上所述是小編給大家介紹的原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: