jQuery:各种提交方式

之前遇到的一个问题

之前遇到过这样一个问题:需要在弹窗里面提交表单,然后在表单提交完之后需要关闭弹窗并刷新当前页面(弹窗里面是iFrame).最早的时候,我是这样处理的:在点击弹窗按钮之后,设置一个setTimeout对弹窗进行关闭.这样就导致了一个问题——有时候弹窗里面的还没处理完,弹窗就关闭了,导致事务失败.数据也就提交失败.

后来换了一种方式对数据提交进行处理(上面那种方式,在提交之后会闪现一个页面[可能是空白页,也可能是其它设置的返回页面,但是在数据很少的情况下,是可以提交成功的]):使用Ajax提交相关数据,然后在success函数里面处理弹窗的关闭与刷新当前页面.

jQuery LOGO
image-2476

看下代码.

源码

下面这段代码就是处理上述问题的(下面这段代码不能提交文件!!!).


//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,不然无法提交

// jquery.form.js 方式->可以提交文件.
$("#registerForm").ajaxSubmit({
type: "post",
url: $("#registerForm").attr("action"),// 必须设置action.
success: function (data) {
// 成功时的操作......
},
error: function (msg) {
// 失败时的操作......
}
});

注意,如果直接使用$(“#registerForm”).submit();来提交表单,都是会刷新页面的.要达到页面不刷新,就只能用ajax方式提交数据.

比如,需要在提交成功之后,显示一个弹窗,可以像下面这样去实现:

<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>

如上即可.

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据