Javascript异步表单提交，图片上传，兼容异步模拟ajax技术_建站学-个人建站指南,网页制作,网站设计,网站制作教程

使用Javascript异步表单提交，图片上传，兼容异步模拟ajax技术,需要的朋友可以参考下。

前言：
咋一看标题还挺长的呢，还有这么多功能，其实简化一点就是一个功能，异步表单提交，只是在异步表单提交这个大功能下，可以实现图片上传，模拟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:

　　简单讲解：
　　其实里面比较麻烦的应该是处理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);
});

(责任编辑：admin)

搜索

热门标签:

Javascript异步表单提交，图片上传，兼容异步模拟ajax技术