前言:
咋一看标题还挺长的呢,还有这么多功能,其实简化一点就是一个功能,异步表单提交,只是在异步表单提交这个大功能下,可以实现图片上传,模拟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 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('')[0];
//add submit value in form
for (var i = 0, num = subarr.length; 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 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);
});