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);
}
});
jquery ajax 放在重复点击事件beforeSend方法的更多相关文章
- jQuery绑定和解绑点击事件及重复绑定解决办法
原文地址:http://www.111cn.net/wy/jquery/47597.htm 绑点击事件这个是jquery一个常用的功能,如click,unbind等等这些事件绑定事情,但还有很多朋友不 ...
- 关于Android避免按钮重复点击事件
最近测试人员测试我们的APP的时候,喜欢快速点击某个按钮,出现一个页面出现多次,测试人员能不能禁止这样.我自己点击了几下,确实存在这个问题,也感觉用户体验不太好.于是乎后来我搜了下加一个方法放在我们U ...
- jquery 触发a链接点击事件
jquery 触发a链接点击事件 <p class="btnSubmit"><a href="javascript:submitData();" ...
- jquery中交替点击事件toggle方法的使用示例
jquery中交替点击事件toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能,下面有个不错的示例,感兴趣的朋友可以参考下 复制代码代码如下: $('#clickId‘) ...
- (转载)js(jquery)的on绑定点击事件执行两次的解决办法
js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...
- Echarts如何添加鼠标点击事件?防止重复触发点击事件
Echarts如何添加鼠标点击事件? 1.通常我们只使用了以下代码,通过配置项和数据显示图表. var myChart = echarts.init(document.getElementById(' ...
- jquery单选框radio绑定click事件实现方法
本文实例讲述了jquery单选框radio绑定click事件实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码代码如下: <html><head><title ...
- 通过jQuery给<li>绑定点击事件
背景:有个需求需要js中实现li标签的事件绑定,li通过在ajax请求中动态添加,按照常理,使用jQuery,可以使用以下方法绑定点击事件: $(function(){ commonAjaxCall ...
- jQuery触发a标签点击事件-为什么不跳转
今天开发发现 使用jQuery触发a标签的点击事件,当前的样式发生了变化,可是没有跳转,为什么? 百度后找到的解决方案: <a onclick="hanle()" href= ...
随机推荐
- selenium+python 绕过登录进行测试
多个Py文件进行多线程测试时,每次登录是很麻烦的事情,所以通过cookie登录,可以绕过登录操作 但是至少需要正常登录一次才能获取到cookie 然后使用cookies进行登录
- Python中字典的详细用法
#字典 #字典是Python中唯一内建的映射类型.字典中没有特殊的顺序,但都是存储在一个特定的键(key)下面,键可以是数字,字符串,甚至是元组 #一.字典的使用 #在某些情况下,字典比列表更加适用: ...
- 使用CSS3开启GPU硬件加速提升网站动画渲染性能
遇到的问题: 网站本身设计初衷就没有打算支持IE8及以下版本浏览器,并不是因为代码兼容性问题,而是真的不想迁就那些懒得更新自己操作系统和浏览器的用户,毕竟是我自己的网站,所以我说了算!哈哈~ 没有了低 ...
- .net 裁剪图片
private void GetImg() { ) { return; } ]; string[] imgsize = Request["imgsize"].Split('& ...
- C++: class sizeof
https://blog.csdn.net/fengxinlinux/article/details/72836199 C++中类所占的大小计算,因为涉及到虚函数成员,静态成员,虚继承,多继承以及空类 ...
- ES5数组扩展
ES5给数组对象添加了一些方法, 常用的5个: 1. Array.prototype.indexOf(value) : 得到值在数组中的第一个下标 2. Array.prototype.lastInd ...
- LeetCode第九题—— Palindrome Number(判断回文数)
题目描述 Determine whether an integer is a palindrome. An integer is a palindrome when it reads the same ...
- Linux g++
Usage: g++ [options] file...Options: -pass-exit-codes Exit with highest error code from a p ...
- gitbook新版本"gitbook build"命令导出的html不能跳转的解决办法
使用的是win7系统,gitbook新版本不支持html跳转功能,所以要降版本至2.6.7 解决办法如下: 第一步: 生成时指定gitbook的版本, 本地没有会先下载 gitbook build - ...
- (转)SQL盲注攻击的简单介绍
转:http://hi.baidu.com/duwang1104/item/65a6603056aee780c3cf2968 1 简介 1.1 普通SQL注入技术概述 目前没有对SQL ...