Javascript異步表單提交，圖片上傳，兼容異步模擬ajax技術(shù)
更新時(shí)間：2010年05月10日 18:29:18 作者：
使用Javascript異步表單提交，圖片上傳，兼容異步模擬ajax技術(shù),需要的朋友可以參考下。
前言：
咋一看標(biāo)題還挺長(zhǎng)的呢，還有這么多功能，其實(shí)簡(jiǎn)化一點(diǎn)就是一個(gè)功能，異步表單提交，只是在異步表單提交這個(gè)大功能下，可以實(shí)現(xiàn)圖片上傳，模擬ajax技術(shù)（其實(shí)很早以前就是通過(guò)這個(gè)方式來(lái)實(shí)現(xiàn)多瀏覽器的兼容ajax，這里只是懷懷舊，作為一個(gè)技術(shù)來(lái)玩玩），下面的內(nèi)容需要有一定的js基礎(chǔ)，要不然理解起來(lái)會(huì)比較困難。
注意事項(xiàng)：
這是我bBank里面的一個(gè)方法，現(xiàn)在我把他提取出來(lái)成一個(gè)通用方法來(lái)講解。
bBank 框架介紹：http://www.cnblogs.com/bruceli/archive/2010/04/15/bBank.html
為什么要提到bBank，因?yàn)樵谙旅娴姆椒ㄖ?，?huì)使用到bBank的數(shù)組的判斷，字符串html轉(zhuǎn)換標(biāo)準(zhǔn)dom（我上一篇文章就介紹了這個(gè)，點(diǎn)擊見(jiàn)詳情），移除自己方法，css選擇器，所以大家看到不要陌生，你可以自己寫(xiě)方法來(lái)替換這些方法，也可以直接用bBank的方法，可以下載bBank看源代碼。
b$.type.isArray(args) 判斷是否是數(shù)組
b$.parseDom(strs) 字符串直接轉(zhuǎn)換為標(biāo)準(zhǔn)的dom對(duì)象
b$('#bBankAsynFormSubmit_form_1b').removeSelf() 移除自己
b$() css選擇器
原理：
核心是通過(guò)iframe來(lái)完成異步。在頁(yè)面放入一個(gè)隱藏的iframe，表單有個(gè)屬性target，設(shè)置target為你要來(lái)進(jìn)行異步提交的iframe，那么當(dāng)你在提交表單的時(shí)候，其實(shí)是在使用iframe來(lái)作為提交顯示載體，頁(yè)面其它內(nèi)容是無(wú)刷新的。
其實(shí)原理很簡(jiǎn)單，既然iframe是作為顯示載體的，那么我們擴(kuò)展下，如果提交的頁(yè)面是有返回值的，那么返回值會(huì)成為iframe的body里面的內(nèi)容，在通過(guò)iframe來(lái)取得body里面的內(nèi)容來(lái)，是不是和ajax有點(diǎn)像，這就是以前最早用來(lái)實(shí)現(xiàn)異步的方法了。
ajax是時(shí)間觸發(fā)制的，既然要模擬ajax，那么我們也要觸發(fā)事件，其實(shí)也很簡(jiǎn)單，只要使用iframe的onload裝載完成事件就可以了。
實(shí)現(xiàn)：
code:
var asyn = {
formSubmit: function (args, action, func) {
this.clearContext();
this.callBack = null;
var subArr = [];
var subArrT = [];
if (b$.type.isArray(args)) {
subArr = args;
} else {
var tag = args.tagName.toLowerCase();
if (tag == "form") { for (var i = 0, num = args.childNodes.length; i < num; i++) { subArr.push(args.childNodes[i]); } }
else { subArr = [args]; }
}
//create asyn form and ifroma
var objForm = document.createElement("form");
objForm.action = action;
objForm.target = "bBankAsynFormSubmit_iframe_1b";
objForm.encoding = "multipart/form-data";
objForm.method = "post";
objForm.id = "bBankAsynFormSubmit_form_1b";
objForm.style.display = "none";
var objIframe = b$.parseDom('<iframe id="bBankAsynFormSubmit_iframe_1b" name="bBankAsynFormSubmit_iframe_1b" src="about:blank" style="display:none;" onload="javascript:setTimeout(\'asyn.complete()\',100)"></iframe>')[0];
//add submit value in form
for (var i = 0, num = subArr.length; i < num; i++) {
if (!subArr[i].name && subArr[i].nodeType == 1 && subArr[i].tagName.toLowerCase() == "input") subArr[i].name = "bBankAsynFormSubmit_input_1b_" + i;
var input = subArr[i].cloneNode(true);
subArrT.push(input);
subArr[i].parentNode.replaceChild(input, subArr[i]);
objForm.appendChild(subArr[i]);
}
//submit
document.body.appendChild(objIframe);
document.body.appendChild(objForm);
objForm.submit();
//dispose
for (var i = 0, num = subArrT.length; i < num; i++) { subArrT[i].parentNode.replaceChild(subArr[i], subArrT[i]); }
if (func) this.callBack = func;
},
complete: function () {
var responseText = "";
try {
var objIframe = document.getElementById("bBankAsynFormSubmit_iframe_1b");
if (objIframe.contentWindow) { responseText = objIframe.contentWindow.document.body.innerHTML; }
else { responseText = objIframe.contentDocument.document.body.innerHTML; }
} catch (err) { }
this.clearContext();
if (this.callBack) this.callBack(responseText);
},
clearContext: function () {
if (b$('#bBankAsynFormSubmit_form_1b')) b$('#bBankAsynFormSubmit_form_1b').removeSelf();
if (b$('#bBankAsynFormSubmit_iframe_1b')) b$('#bBankAsynFormSubmit_iframe_1b').removeSelf();
},
callBack: null
};
簡(jiǎn)單講解：
其實(shí)里面比較麻煩的應(yīng)該是處理iframe的多瀏覽器兼容問(wèn)題了，其實(shí)我們也不用去鉆牛角尖來(lái)討論iframe的這個(gè)兼容問(wèn)題，我們把兼容交給瀏覽器自己來(lái)解析和解決，這里使用了字符串轉(zhuǎn)dom。
首先我創(chuàng)建了一個(gè)form表單和iframe，都是隱藏的，把表單的內(nèi)容都轉(zhuǎn)到我創(chuàng)建的隱藏表單中，在把創(chuàng)建的隱藏表單提交。全部完成后在移除創(chuàng)建的表單和iframe。
使用：
asyn.formSubmit(args, action [, func]) arg：可以為一個(gè)form表單，一個(gè)input表單元素，input表單元素?cái)?shù)組。 action：提交的url。 func：回調(diào)函數(shù)
例：asyn.formSubmit(inputArr, 'xxx.aspx', function(d){
alert(d);
});
END
到這里就結(jié)束了，在這里向大家推薦一個(gè)我自己寫(xiě)的js框架，上面的這個(gè)方法集成在框架里面了
使用：
b$.asyn.formSubmit(inputArr, 'xxx.aspx', function(d){
alert(d);
});
咋一看標(biāo)題還挺長(zhǎng)的呢，還有這么多功能，其實(shí)簡(jiǎn)化一點(diǎn)就是一個(gè)功能，異步表單提交，只是在異步表單提交這個(gè)大功能下，可以實(shí)現(xiàn)圖片上傳，模擬ajax技術(shù)（其實(shí)很早以前就是通過(guò)這個(gè)方式來(lái)實(shí)現(xiàn)多瀏覽器的兼容ajax，這里只是懷懷舊，作為一個(gè)技術(shù)來(lái)玩玩），下面的內(nèi)容需要有一定的js基礎(chǔ)，要不然理解起來(lái)會(huì)比較困難。
注意事項(xiàng)：
這是我bBank里面的一個(gè)方法，現(xiàn)在我把他提取出來(lái)成一個(gè)通用方法來(lái)講解。
bBank 框架介紹：http://www.cnblogs.com/bruceli/archive/2010/04/15/bBank.html
為什么要提到bBank，因?yàn)樵谙旅娴姆椒ㄖ?，?huì)使用到bBank的數(shù)組的判斷，字符串html轉(zhuǎn)換標(biāo)準(zhǔn)dom（我上一篇文章就介紹了這個(gè)，點(diǎn)擊見(jiàn)詳情），移除自己方法，css選擇器，所以大家看到不要陌生，你可以自己寫(xiě)方法來(lái)替換這些方法，也可以直接用bBank的方法，可以下載bBank看源代碼。
b$.type.isArray(args) 判斷是否是數(shù)組
b$.parseDom(strs) 字符串直接轉(zhuǎn)換為標(biāo)準(zhǔn)的dom對(duì)象
b$('#bBankAsynFormSubmit_form_1b').removeSelf() 移除自己
b$() css選擇器
原理：
核心是通過(guò)iframe來(lái)完成異步。在頁(yè)面放入一個(gè)隱藏的iframe，表單有個(gè)屬性target，設(shè)置target為你要來(lái)進(jìn)行異步提交的iframe，那么當(dāng)你在提交表單的時(shí)候，其實(shí)是在使用iframe來(lái)作為提交顯示載體，頁(yè)面其它內(nèi)容是無(wú)刷新的。
其實(shí)原理很簡(jiǎn)單，既然iframe是作為顯示載體的，那么我們擴(kuò)展下，如果提交的頁(yè)面是有返回值的，那么返回值會(huì)成為iframe的body里面的內(nèi)容，在通過(guò)iframe來(lái)取得body里面的內(nèi)容來(lái)，是不是和ajax有點(diǎn)像，這就是以前最早用來(lái)實(shí)現(xiàn)異步的方法了。
ajax是時(shí)間觸發(fā)制的，既然要模擬ajax，那么我們也要觸發(fā)事件，其實(shí)也很簡(jiǎn)單，只要使用iframe的onload裝載完成事件就可以了。
實(shí)現(xiàn)：
code:
復(fù)制代碼 代碼如下:
var asyn = {
formSubmit: function (args, action, func) {
this.clearContext();
this.callBack = null;
var subArr = [];
var subArrT = [];
if (b$.type.isArray(args)) {
subArr = args;
} else {
var tag = args.tagName.toLowerCase();
if (tag == "form") { for (var i = 0, num = args.childNodes.length; i < num; i++) { subArr.push(args.childNodes[i]); } }
else { subArr = [args]; }
}
//create asyn form and ifroma
var objForm = document.createElement("form");
objForm.action = action;
objForm.target = "bBankAsynFormSubmit_iframe_1b";
objForm.encoding = "multipart/form-data";
objForm.method = "post";
objForm.id = "bBankAsynFormSubmit_form_1b";
objForm.style.display = "none";
var objIframe = b$.parseDom('<iframe id="bBankAsynFormSubmit_iframe_1b" name="bBankAsynFormSubmit_iframe_1b" src="about:blank" style="display:none;" onload="javascript:setTimeout(\'asyn.complete()\',100)"></iframe>')[0];
//add submit value in form
for (var i = 0, num = subArr.length; i < num; i++) {
if (!subArr[i].name && subArr[i].nodeType == 1 && subArr[i].tagName.toLowerCase() == "input") subArr[i].name = "bBankAsynFormSubmit_input_1b_" + i;
var input = subArr[i].cloneNode(true);
subArrT.push(input);
subArr[i].parentNode.replaceChild(input, subArr[i]);
objForm.appendChild(subArr[i]);
}
//submit
document.body.appendChild(objIframe);
document.body.appendChild(objForm);
objForm.submit();
//dispose
for (var i = 0, num = subArrT.length; i < num; i++) { subArrT[i].parentNode.replaceChild(subArr[i], subArrT[i]); }
if (func) this.callBack = func;
},
complete: function () {
var responseText = "";
try {
var objIframe = document.getElementById("bBankAsynFormSubmit_iframe_1b");
if (objIframe.contentWindow) { responseText = objIframe.contentWindow.document.body.innerHTML; }
else { responseText = objIframe.contentDocument.document.body.innerHTML; }
} catch (err) { }
this.clearContext();
if (this.callBack) this.callBack(responseText);
},
clearContext: function () {
if (b$('#bBankAsynFormSubmit_form_1b')) b$('#bBankAsynFormSubmit_form_1b').removeSelf();
if (b$('#bBankAsynFormSubmit_iframe_1b')) b$('#bBankAsynFormSubmit_iframe_1b').removeSelf();
},
callBack: null
};
簡(jiǎn)單講解：
其實(shí)里面比較麻煩的應(yīng)該是處理iframe的多瀏覽器兼容問(wèn)題了，其實(shí)我們也不用去鉆牛角尖來(lái)討論iframe的這個(gè)兼容問(wèn)題，我們把兼容交給瀏覽器自己來(lái)解析和解決，這里使用了字符串轉(zhuǎn)dom。
首先我創(chuàng)建了一個(gè)form表單和iframe，都是隱藏的，把表單的內(nèi)容都轉(zhuǎn)到我創(chuàng)建的隱藏表單中，在把創(chuàng)建的隱藏表單提交。全部完成后在移除創(chuàng)建的表單和iframe。
使用：
asyn.formSubmit(args, action [, func]) arg：可以為一個(gè)form表單，一個(gè)input表單元素，input表單元素?cái)?shù)組。 action：提交的url。 func：回調(diào)函數(shù)
例：asyn.formSubmit(inputArr, 'xxx.aspx', function(d){
alert(d);
});
END
到這里就結(jié)束了，在這里向大家推薦一個(gè)我自己寫(xiě)的js框架，上面的這個(gè)方法集成在框架里面了
使用：
復(fù)制代碼 代碼如下:
b$.asyn.formSubmit(inputArr, 'xxx.aspx', function(d){
alert(d);
});
相關(guān)文章
微信小程序跳轉(zhuǎn)外部鏈接的詳細(xì)實(shí)現(xiàn)方法
寫(xiě)這個(gè)是因?yàn)樽罱〕绦虻囊粋€(gè)需求需要從小程序跳轉(zhuǎn)到客戶的官網(wǎng),或者其他外部報(bào)名鏈接,下面這篇文章主要給大家介紹了關(guān)于微信小程序跳轉(zhuǎn)外部鏈接的詳細(xì)實(shí)現(xiàn)方法,需要的朋友可以參考下2022-10-10
將\u8BF7\u9009\u62E9 這樣的字符串轉(zhuǎn)為漢字的代碼
如何把 \u8BF7\u9009\u62E9 這樣的字符串轉(zhuǎn)為漢字,喜歡的朋友可以參考下。2010-11-11
這篇文章主要為大家詳細(xì)介紹了js截取字符串功能的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
基于JS實(shí)現(xiàn)的消消樂(lè)游戲的示例代碼
這篇文章主要為大家介紹了如何利用JS實(shí)現(xiàn)消消樂(lè)小游戲,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-04-04
JavaScript隨機(jī)生成信用卡卡號(hào)的方法
這篇文章主要介紹了JavaScript隨機(jī)生成信用卡卡號(hào)的方法,涉及javascript操作隨機(jī)隨機(jī)數(shù)生成信用卡卡號(hào)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
mustache.js實(shí)現(xiàn)首頁(yè)元件動(dòng)態(tài)渲染的示例代碼
這篇文章主要介紹了mustache.js實(shí)現(xiàn)首頁(yè)元件動(dòng)態(tài)渲染的示例代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12
在table中插入多行的js代碼(與insertAdjacentHTML相似的功能)
在table中插入多行，能使用與insertAdjacentHTML相似的功能2010-06-06
JavaScript點(diǎn)擊按鈕后彈出透明浮動(dòng)層的方法
這篇文章主要介紹了JavaScript點(diǎn)擊按鈕后彈出透明浮動(dòng)層的方法,可實(shí)現(xiàn)點(diǎn)擊按鈕彈出居中的透明浮動(dòng)層的效果,涉及javascript操作鼠標(biāo)事件及頁(yè)面樣式的相關(guān)技巧,需要的朋友可以參考下2015-05-05
TensorFlow.js 微信小程序插件開(kāi)始支持模型緩存的方法
這篇文章主要介紹了TensorFlow.js 微信小程序插件開(kāi)始支持模型緩存的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
JavaScript 2048 游戲?qū)嵗a(簡(jiǎn)單易懂)
使用javascript制作的2048小游戲非常好玩，有意思，下面給大家分享使用javascript代碼制作的2048游戲，需要的朋友參考下吧2016-03-03