点击触发ajax重复提交表单,屡次连续点击致使Ajax重复提交
有个相似商品管理的功能,商品经过execle 文件导入商品,而后“检查”导入的数据的合法性功能。html
因为导入的商品的数量通常较大,因此点击一次“检查”按钮,每次的执行时间相对较长,用户每每会进行屡次点击“检查“”按钮,形成程序开销较大,甚至程序卡死,或者由于ajax 提交的回调函数等待执行时间过长,致使页面假死或崩溃。因此必需要给相似这样的按钮加上“控制”------在ajax 执行时,使按钮失效(不能点击),待后太代码执行完毕后,再回调函数中处理一下这个button,使之能够继续点击。ajax
这样的功能貌似很好实现,可是期间遇到个小问题,本身困惑了个把小时,因此拿出本身的经历,以便其余遇到此类问题的小伙伴们节约更多时间,下面贴关键代码:json
检查
异步
代码片断A:async
$("#check").click(function(){
$("#check").addClass('disabled').attr('disabled', true); //---------------------------17行
$.ajax({
url:"${base}/impstkmas/check.jhtml",
type : 'post',
dataType:'json',
async:false,
success: function(data){
$("#check").removeClass('disabled').attr('disabled', false);//-----------------------------24行
if(data.success){
$("#grid-table").jqGrid('setGridParam',{
postData:{} //发送数据
}).trigger("reloadGrid"); //从新载入
$.jBox.tip('检查完成!', 'success');
}else{
$.jBox.tip(data.msg, 'error');
}
}
});
});
函数
代码片断B:post
$("#check").click(function(){
$(this).addClass('disabled').attr('disabled', true);//--------------------------------17 行
$.ajax({
url:"${base}/impstkmas/check.jhtml",
type : 'post',
dataType:'json',
async:false,
success: function(data){
$(this).removeClass('disabled').attr('disabled', false);//--------------------------------24 行
if(data.success){
$("#grid-table").jqGrid('setGridParam',{
postData:{} //发送数据
}).trigger("reloadGrid"); //从新载入
$.jBox.tip('检查完成!', 'success');
}else{
$.jBox.tip(data.msg, 'error');
}
}
});
});
this
你们比较上面两段代码,能够看出区别:url
A段代码是正确的执行,B段代码是不能正确执行的。开始特别疑惑:spa
$(this).addClass('disabled').attr('disabled', true); 和 $(this).removeClass('disabled').attr('disabled', false); 一个是使button失效,一个是使button 生效,为何只能失效,不能回复生效。
缘由相信你们已经看出来了,这里是用在ajax 里的,我急居然忽略了ajax 的最大特色:“异步”!!!。 没错,就是这个特色致使,17 行的代码执行完了,是能够的,由于$(this) 元素是被认识的。而 24 行的代码,死活就是执行不了,由于他用在了回调函数里了,此时再用$(this),代码已经不认识$(this)指的是哪一个元素了,因此执行不了。
总结一句话就是,17 行的 $(this) 和 24 行的 $(this) 是不同的,因此,你们仍是尽可能不偷懒,用元素选择器在选择出来的对象是可定不会错的!
点击触发ajax重复提交表单,屡次连续点击致使Ajax重复提交相关推荐
- VIEW层AJAX提交表单到Controller的实体(AJAX传递序列化的输入元素)
在MVC环境中,AJAX方式添加一个对象,这个对象在Models中是一个视图模型,在前台显示时是这样的代码: <%using (Html.BeginForm()) { %> ...
- 用ajax提交表单给数据库,如何利用ajax提交form表单到数据库
如何利用ajax提交form表单到数据库 发布时间:2021-06-17 14:52:49 来源:亿速云 阅读:75 作者:小新 这篇文章主要介绍如何利用ajax提交form表单到数据库,文中介绍的非 ...
- 小程序提交表单mysql_GitHub - kun19911227/minipro: 微信小程序提交带图片的表单
minipro 微信小程序提交带图片的表单 目录说明 upload_images ├── pages │ ├── upload_info 提交表单 │ └── display_info 信息展示 ├─ ...
- python网页提交表单_用Python的urllib库提交WEB表单
class EntryDemo( Frame ): """Demonstrate Entrys and Event binding""" c ...
- yii 提交表单报400错误,提示 “您提交的数据无法验证”,问题处理。
2019独角兽企业重金招聘Python工程师标准>>> 正确做法: Add this in the head section of your layout: <?= Html: ...
- php 表单 同步,Jquery点击按钮 异步和同步提交表单
最近在开发一个jsp学生信息管理系统,由于刚刚接触jsp,遇到问题比较多,特此记录与大家分享. Jquery ajax提交表单到servlet示例 前台部分代码: 姓名 学号 ajax提交表 ...
- jquery Ajax 通过jsonp的方式跨域提交表单
Jquery Ajax可以通过jsonp的方式跨域提交表单,至于什么是跨域提交简单说就是你的客户端和服务端不在同一个域名下或端口号不同也可以叫做跨域. 前台代码: $.ajax({type : 'ge ...
- AJAX 提交表单以及文件上传
本文转自:https://www.cnblogs.com/zhuxiaojie/p/4783939.html#autoid-0-0-0 作者:朱小杰 前言 使用ajax请求数据,很多人都会,比如说: ...
- js表单提交 php,JavaScript提交表单的几种方法
在我们工作中我们会经常使用到form表单,相信大家再熟悉不过了,那么提交表单有很多种方法,JavaScript提交表单的方法又是如何呢,今天就带大家介绍下JavaScript提交表单的几种方法! 第一 ...
- html 禁用回车提交,HTML防止input回车提交表单
原链接:https://blog.csdn.net/ligang2585116/article/details/44699567 自动提交情况说明: 1.默认情况下,单个输入框,无论按钮的type=& ...
最新文章
- VMware 克隆网卡无法启动
- CS0136 无法在此范围中声明名为“channel”的局部变量或参数,因为该名称在封闭局
- oracle11g中SQL优化(SQL TUNING)新特性之Adaptive Cursor Sharing (ACS)
- linux /etc/rc.d/目录的详解
- idea 快捷键java
- linux nfs spec,创建 NFS Ubuntu Linux 服务器卷 - Azure Kubernetes Service | Microsoft Docs
- 不是我的错,也不是Atlas的!
- 从零开始刷Leetcode——数组(118.119.121)
- python修改文件后缀_Python批量修改文件后缀的方法
- 深度学习中降低过拟合(OverFitting)的方法
- php防止SQL注入
- Golang 解析XML
- vue点击按钮打开下拉菜单_vue+element下拉框样式的点击按钮
- PLC可编程控制器综合实训装置
- 传销式招聘!被骗到东南亚的程序员到底有多惨?
- 荣誉系统排名是整个服务器,《魔兽世界怀旧服》荣誉系统怎么样 荣誉系统奖励大全...
- 面试高级算法梳理笔记
- outlook2007 菜单灰色 不能使用的解决方案
- 根据需求,完成如下代码(按照标准格式写),并在测试类中进行测试?
- msm8909平台JEITA配置和bat-V therm表合入
热门文章
- 服务器的登录日志文件,windows云服务器登录日志文件
- matlab有shapely包吗,[哈工大]Modelarts NPU 安装shapely包失败
- 在线教学、视频会议 Webus Fox(1)文本、语音、视频聊天及电子白板基本用法...
- 验证iaas的sql服务器出现error configuring vRealize automation server
- vsftpd+mysql使用
- Oracle监控指标
- delete了,析构函数却没有调用
- weblogic解析web.xml问题
- 2010中国存储创新年会
- Tips for ASP.NET Application Performance Enhancement