无为清净楼资源网 Design By www.qnjia.com
前言:
咋一看标题还挺长的呢,还有这么多功能,其实简化一点就是一个功能,异步表单提交,只是在异步表单提交这个大功能下,可以实现图片上传,模拟ajax技术(其实很早以前就是通过这个方式来实现多浏览器的兼容ajax,这里只是怀怀旧,作为一个技术来玩玩),下面的内容需要有一定的js基础,要不然理解起来会比较困难。
注意事项:
这是我bBank里面的一个方法,现在我把他提取出来成一个通用方法来讲解。
bBank 框架介绍:http://www.cnblogs.com/bruceli/archive/2010/04/15/bBank.html
为什么要提到bBank,因为在下面的方法中,会使用到bBank的数组的判断,字符串html转换标准dom(我上一篇文章就介绍了这个,点击见详情),移除自己方法,css选择器,所以大家看到不要陌生,你可以自己写方法来替换这些方法,也可以直接用bBank的方法,可以下载bBank看源代码。
b$.type.isArray(args) 判断是否是数组
b$.parseDom(strs) 字符串直接转换为标准的dom对象
b$('#bBankAsynFormSubmit_form_1b').removeSelf() 移除自己
b$() css选择器
原理:
核心是通过iframe来完成异步。在页面放入一个隐藏的iframe,表单有个属性target,设置target为你要来进行异步提交的iframe,那么当你在提交表单的时候,其实是在使用iframe来作为提交显示载体,页面其它内容是无刷新的。
其实原理很简单,既然iframe是作为显示载体的,那么我们扩展下,如果提交的页面是有返回值的,那么返回值会成为iframe的body里面的内容,在通过iframe来取得body里面的内容来,是不是和ajax有点像,这就是以前最早用来实现异步的方法了。
ajax是时间触发制的,既然要模拟ajax,那么我们也要触发事件,其实也很简单,只要使用iframe的onload装载完成事件就可以了。
实现:
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="/UploadFiles/2021-04-02/about:blank">//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
};

  简单讲解:
  其实里面比较麻烦的应该是处理iframe的多浏览器兼容问题了,其实我们也不用去钻牛角尖来讨论iframe的这个兼容问题,我们把兼容交给浏览器自己来解析和解决,这里使用了字符串转dom。
  首先我创建了一个form表单和iframe,都是隐藏的,把表单的内容都转到我创建的隐藏表单中,在把创建的隐藏表单提交。全部完成后在移除创建的表单和iframe。
  使用:
  asyn.formSubmit(args, action [, func]) arg:可以为一个form表单,一个input表单元素,input表单元素数组。 action:提交的url。 func:回调函数
例:asyn.formSubmit(inputArr, 'xxx.aspx', function(d){
      alert(d);
});
END
到这里就结束了,在这里向大家推荐一个我自己写的js框架,上面的这个方法集成在框架里面了
使用:
复制代码 代码如下:
b$.asyn.formSubmit(inputArr, 'xxx.aspx', function(d){
    alert(d);
});
标签:
Javascript,异步,图片上传

无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。