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= ...
随机推荐
- hash值的计算与转换 分类: ACM TYPE 2015-05-07 17:49 36人阅读 评论(0) 收藏
#include <bits/stdc++.h> using namespace std; const int MAXN = 100; const int X = 3; long long ...
- python初探爬虫
python爬虫初探 爬取前50名豆瓣电影: 废话少说,直接上代码! import reimport requestsfrom bs4 import BeautifulSoupdef get_co ...
- Python匹马行天下之运算符
什么事运算符? 本章节主要说明Python的运算符.举个简单的例子 4 +5 = 9 . 例子中,4 和 5 被称为操作数,"+" 称为运算符. Python语言支持以下类型的运算 ...
- 【POJ】1611 The Suspects
题目链接:http://poj.org/problem?id=1611 题意:有学生感染了SARS.一个学生可以加入很多小组.n个学生m个小组,每个小组有k个组内成员,后跟着k个成员的组内编号.让你求 ...
- 使用PyCharm创建Django项目及基本配置
https://segmentfault.com/a/1190000011576316 pycharm是个很不错的python开发工具,大大缩短了python项目的创建时间以及调试时间在使用pytho ...
- The Counting Problem
The Counting Problem 询问区间\([a,b]\)中\(1\sim 9\)出现的次数,0 < a, b < 100000000. 解 显然为数位递推,考虑试填法,现在关键 ...
- JQuery ajax提交表单及表单验证
JQuery ajax提交表单及表单验证 博客分类: jsp/html/javascript/ajax/development Kit 开源项目 注:经过验证,formValidator只适合一个 ...
- [JZOJ6341] 【NOIP2019模拟2019.9.4】C
题目 题目大意 给你一颗带点权的树,后面有许多个询问\((u,v)\),问: \[\sum_{i=0}^{k-1}dist(u,d_i) \ or \ a_{d_i}\] \(d\)为\(u\)到\( ...
- SpringCloudConfig
方便服务配置文件统一管理,实时更新 组成 在spring cloud config组件中,分两个角色,一是config server,二是config client Config Server是一个可 ...
- Maven远程仓库地址修改(精)
国内最快的maven镜像 阿里云maven镜像 <repositories> <repository> <id>spring-snapshots</id&g ...