jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作。
具体可参考jQuery官方文档:http://api.jquery.com/Ajax_Events/
$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ......
});
防止重复数据
在实际项目开发中,提交表单时常常由于网络或者其原因,用户点击提交按钮误认为自己没有操作成功,进而会重复提交按钮操作次数,如果页面前端代码没有做一些相应的处理,通常会导致多条同样的数据插入数据库,导致脏数据的增加。要避免这种现象,在$.ajax请求中的beforeSend方法中把提交按钮禁用掉,等到Ajax请求执行完毕,在恢复按钮的可用状态。
举个例子:
// 提交表单数据到后台处理
$.ajax({
type: "post",
data: studentInfo,
contentType: "application/json",
url: "/Home/Submit",
beforeSend: function () {
// 禁用按钮防止重复提交
$("#submit").attr({ disabled: "disabled" });
},
success: function (data) {
if (data == "Success") {
//清空输入框 这里我没测试
clearBox();
}
},
complete: function () {
$("#submit").removeAttr("disabled");
},
error: function (data) {
console.info("error: " + data.responseText);
}
});
模拟Toast效果
ajax请求服务器加载数据列表时提示loading(“加载中,请稍后...”),
$.ajax({
type: "post",
contentType: "application/json",
url: "/Home/GetList",
beforeSend: function () {
$("loading").show();
},
success: function (data) {
if (data == "Success") {
// ...
}
},
complete: function () {
$("loading").hide();
},
error: function (data) {
console.info("error: " + data.responseText);
}
});
方法二:
更简单模式针对:验证正确跳转,验证不通过提示类型
ajax提交表单数据到后台处理
ajax提交时禁掉提交按钮:
//nice validaor 校验
function login(){
$("#form1").isValid(
function(v) {
if (v) {
$("#save").attr({ disabled: "disabled" });//禁止提交按钮
add();
}
});
};
function add(){
$.ajax({
type : 'post',
url : '${ctx}/user/save.action?infoCode=1',
data : $("#form1").serialize(),
success : function(data) {
console.log(data)
if (data * 1 == -1) {
layer.msg('验证码不正确!',{icon : 7});
changeCode();
$("#save").removeAttr("disabled");//验证码恢复按钮可点
} else {
layer.msg('注册成功,赶紧去个人中心完善公司信息吧!',{icon : 1});
//跳转到首页
setTimeout(function () {parent.window.location.href = "../fore/homepage/ftpage.action" },3000);
}
}
});
}
方法三:
更简单模式针对:发送信息,发送成功刷新本页面
ajax提交时禁掉提交按钮:发送成功后,刷新页面,按钮又可以点击,只需要控制发送时
function send(){
$("#form1").isValid(function(v) {
if(v){
$("#btn_send").attr("disabled",true);
var content =$("#content").val();
$.ajax({
url : "${ctx}/message/save.action",
type : "post",
data : {
"sendUser" : receiveUser, //发送者
"receiveUser":sendUser ,//接受者
"content":content
},
success : function(data) {
layer.msg('发送成功!',{icon : 1});
window.location.reload();//刷新本页面
},
error : function(xhr, textStatus) {
layer.msg('发送失败!',{icon : 7});
}
});
}
});
}