防止重复数据
在实际项目开发中,提交表单时常常由于网络或者其原因,用户点击提交按钮误认为自己没有操作成功,进而会重复提交按钮操作次数,如果页面前端代码没有做一些相应的处理,通常会导致多条同样的数据插入数据库,导致脏数据的增加。要避免这种现象,在$.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方法的更多相关文章

  1. jQuery绑定和解绑点击事件及重复绑定解决办法

    原文地址:http://www.111cn.net/wy/jquery/47597.htm 绑点击事件这个是jquery一个常用的功能,如click,unbind等等这些事件绑定事情,但还有很多朋友不 ...

  2. 关于Android避免按钮重复点击事件

    最近测试人员测试我们的APP的时候,喜欢快速点击某个按钮,出现一个页面出现多次,测试人员能不能禁止这样.我自己点击了几下,确实存在这个问题,也感觉用户体验不太好.于是乎后来我搜了下加一个方法放在我们U ...

  3. jquery 触发a链接点击事件

    jquery 触发a链接点击事件 <p class="btnSubmit"><a href="javascript:submitData();" ...

  4. jquery中交替点击事件toggle方法的使用示例

    jquery中交替点击事件toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能,下面有个不错的示例,感兴趣的朋友可以参考下 复制代码代码如下: $('#clickId‘) ...

  5. (转载)js(jquery)的on绑定点击事件执行两次的解决办法

    js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...

  6. Echarts如何添加鼠标点击事件?防止重复触发点击事件

    Echarts如何添加鼠标点击事件? 1.通常我们只使用了以下代码,通过配置项和数据显示图表. var myChart = echarts.init(document.getElementById(' ...

  7. jquery单选框radio绑定click事件实现方法

    本文实例讲述了jquery单选框radio绑定click事件实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码代码如下: <html><head><title ...

  8. 通过jQuery给<li>绑定点击事件

    背景:有个需求需要js中实现li标签的事件绑定,li通过在ajax请求中动态添加,按照常理,使用jQuery,可以使用以下方法绑定点击事件: $(function(){  commonAjaxCall ...

  9. jQuery触发a标签点击事件-为什么不跳转

    今天开发发现 使用jQuery触发a标签的点击事件,当前的样式发生了变化,可是没有跳转,为什么? 百度后找到的解决方案: <a onclick="hanle()" href= ...

随机推荐

  1. 剑指offer——30栈的压入、弹出序列

    题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压 ...

  2. 初学hibernate的心得体会

    在初步学习了hibernate之后,使我明白了hibernate是一个怎样的软件.hibernate是一个比较独立的框架,它不需要太多其他软件的支持.hibernate是一个开放源代码的关系映射框架, ...

  3. Spring Cloud Eureka 注册安全一定要做到位!

    /eureka/ 参考配置如下: defaultZone: http://javastack:javastack@eureka1:8761/eureka/, http://javastack:java ...

  4. 18-MySQL-Ubuntu-数据表的查询-连接(七)

    students与classes表,两个表的连接字段是students.cls_id=classes.ID (1) 左连接:left join on 左边表全取,右边表取共有的,没有的为null se ...

  5. UVA Ananagrams /// map set

    https://vjudge.net/problem/UVA-156 题目大意: 输入文本,找出所有满足条件的单词——该单词不能通过字母重排而得到输入的文本中的另外一个单词. 在判断是否满足条件时,字 ...

  6. Linux服务器下对Oracle数据库expdp(导出)和impdp(导入)

    紧接上篇文章,Oracle数据库架构已经创建完成,我的需求是:将老服务器上的数据库迁移到新的数据库上. 这就用到impdp(导入)操作. 要想实现对新数据库的impdp(导入)工作, 首先需要从老的数 ...

  7. 2019-8-24-win10-本地适配器不支持重要的低能耗控制器状态

    title author date CreateTime categories win10 本地适配器不支持重要的低能耗控制器状态 lindexi 2019-8-24 16:2:33 +0800 20 ...

  8. [JZOJ6278] 2019.8.5【NOIP提高组A】跳房子

    题目 题目大意 给你一个矩阵,从\((1,1)\)开始,每次往右上.右.右下三个格子中权值最大的那个跳. 第一行上面是第\(n\)行,第\(m\)列右边是第\(1\)列.反之同理. 有两个操作:跳\( ...

  9. (转)JNI入门教程之HelloWorld篇 .

    转: http://blog.csdn.net/mingjava/article/details/180946 本文讲述如何使用JNI技术实现HelloWorld,目的是让读者熟悉JNI的机制并编写第 ...

  10. 尚学linux课程---5、linux操作系统介绍

    尚学linux课程---5.linux操作系统介绍 一.总结 一句话总结: centos开源免费,用的特别多 1.库是什么意思? 没有执行入口的应用程序 2.linux和window下的动态库文件是什 ...