之前遇到的一个问题
之前遇到过这样一个问题：需要在弹窗里面提交表单,然后在表单提交完之后需要关闭弹窗并刷新当前页面（弹窗里面是iFrame）.最早的时候,我是这样处理的:在点击弹窗按钮之后,设置一个setTimeout对弹窗进行关闭.这样就导致了一个问题——有时候弹窗里面的还没处理完,弹窗就关闭了,导致事务失败.数据也就提交失败.
后来换了一种方式对数据提交进行处理(上面那种方式,在提交之后会闪现一个页面[可能是空白页,也可能是其它设置的返回页面,但是在数据很少的情况下,是可以提交成功的]):使用Ajax提交相关数据,然后在success函数里面处理弹窗的关闭与刷新当前页面.
看下代码.
源码
下面这段代码就是处理上述问题的(下面这段代码不能提交文件!!!).
1 2 3 4 5 6 7 8 9 10 | //jquery 自带的ajax,可以提交普通数据 $.ajax({ url : $('#registerForm').prop('action'), // 获取提交地址,必须设置action,此处的prop和attr功能一致,在新版本上推荐使用prop. data : $('#registerForm').serialize(), // 序列化表单数据 type : "POST", dataType:"json", success : function(data) { // 成功时的操作. } }); |
经过修改之后,发现效果奇好无比.简直无与伦比的完美……(话说这不是用来形容妹子的么..)
然后,提交文件可以参考下面这种方式(同样是ajax方式).
下面这种方式,必须引入jquery.form.js,不然无法提交
1 2 3 4 5 6 7 8 9 10 11 | // jquery.form.js 方式->可以提交文件. $("#registerForm").ajaxSubmit({ type: "post", url: $("#registerForm").attr("action"),// 必须设置action. success: function (data) { // 成功时的操作...... }, error: function (msg) { // 失败时的操作...... } }); |
注意,如果直接使用$(“#registerForm”).submit();来提交表单,都是会刷新页面的.要达到页面不刷新,就只能用ajax方式提交数据.
比如,需要在提交成功之后,显示一个弹窗,可以像下面这样去实现:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <pre class="lang:js decode:true " > //jquery 自带的ajax,可以提交普通数据 $.ajax({ url : $('#registerForm').prop('action'), // 获取提交地址,必须设置action,此处的prop和attr功能一致,在新版本上推荐使用prop. data : $('#registerForm').serialize(), // 序列化表单数据 type : "POST", dataType:"json", success : function(data) { // 成功时的操作. alert("恭喜,注册成功!"); } }); </pre> |
如上即可.