jquery ajax 放在重复点击事件beforeSend方法
防止重复数据
在实际项目开发中,提交表单时常常由于网络或者其原因,用户点击提交按钮误认为自己没有操作成功,进而会重复提交按钮操作次数,如果页面前端代码没有做一些相应的处理,通常会导致多条同样的数据插入数据库,导致脏数据的增加。要避免这种现象,在$.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);
}
});
最新文章
- mmorpg手游中的战斗系统
- 【ImageView】ImageView点击事件报错空指针
- linux下打开txt显示乱码的解决方法
- 快速排序(java实现)
- autoproxy 规则
- Unity3D之Assetbundle
- C语言中返回字符串函数的四种实现方法 2015-05-17 15:00 23人阅读 评论(0) 收藏
- 【现代程序设计】【期末作业】【homework-09】
- android源码编译过程
- 简单的JQuery分页代码
- ubuntu远程连接
- 移动端 常见布局CSS3的细节
- HDOJ--ACM-Steps--2.1.3--Cake(GCD,简单数学)
- Of Study
- python全栈开发day56-mysql
- securecrt8.1破解版安装与注册机的使用方法
- 记录下ABAP开发的一些东西(T-code居多)Updated to markdown
- spring mvc 404页面制作
- python 之 string() 模块
- LVM逻辑卷管理测试——创建逻辑卷