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


Posted in Javascript onMay 10, 2010

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

简单讲解:


其实里面比较麻烦的应该是处理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 相关文章推荐
给artDialog 5.02 增加ajax get功能详细介绍
Nov 13 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
Bootstrap中data-target 到底是什么
Feb 14 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 #Javascript
JavaScript几种形式的树结构菜单
May 10 #Javascript
js function使用心得
May 10 #Javascript
javascript 模式设计之工厂模式详细说明
May 10 #Javascript
javascript 精粹笔记
May 09 #Javascript
javascript之通用简单的table选项卡实现(二)
May 09 #Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 #Javascript
You might like
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
python批量修改文件名的实现代码
2014/09/01 Python
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
python验证码识别的示例代码
2017/09/21 Python
python去掉空白行的多种实现代码
2018/03/19 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
工程管理专业毕业生自荐信
2014/01/24 职场文书
检讨书范文2000字
2015/01/28 职场文书
培训感想范文
2015/08/07 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
java多态注意项小结
2021/10/16 Java/Android
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle