有时候,我们期望一些提交操作自动增加遮蔽效果,提交成功时自动去除遮蔽。

方案:

  1、 提交前增加遮蔽逻辑,成功后增加去除遮蔽逻辑,但是不够智能

  2、通过ajax拦截,实现自动添加\去除遮蔽效果

ajax拦截实现

$(document).ajaxSend(function(event,xhr,settings){
var keys = 'add|save|submit|update', /* 地址关键字,自行扩展,以竖线分隔 */
regstr = '\\S*('+key+')[A-Za-z0-9-_]*.(do|action)', /* 后缀可以自行调整 */
urlReg = new RegExp(regstr,'gi');
if(urlReg.test(settings.url)){ /* url满足关键字匹配 */
settings.isSave = true; /* 标识是否提交操作 */
$('#mainpage').addClass('loading'); /* 增加遮蔽效果 */
}
}).ajaxComplete(function(event,xhr,settings){
if(settings.isSave) {
$('#mainpage').removeClass('loading');
}
});

提交操作自动遮蔽实现之ajax的更多相关文章

  1. form表单提交和ajax表单提交,关于移动端如何通过软键盘上的【搜索】和【前进】进行提交操作

    [文章来源]由于自己对于form研究甚少,所以一直用的都是AJAX进行提交,这次后台提出要用form提交,顺便深入研究一下:之前在做表单的时候,发现input可以通过设置不同的type属性,调用不同的 ...

  2. laravel基础课程---12、lavarel的ajax操作2(lavarel的ajax使用总结)

    laravel基础课程---12.lavarel的ajax操作2(lavarel的ajax使用总结) 一.总结 一句话总结: 比较简单:就是js请求ajax,然后控制器获取请求参数,返回数据即可 1. ...

  3. ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作

    ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作 .操作成功后刷新父页面 $this->assign('jumpUrl', "javascript:wi ...

  4. jquery的输入框自动补全功能+ajax

    jquery的输入框自动补全功能+ajax 2017年05月10日 18:51:39 辣姐什么鬼 阅读数:1461 标签: web前端 更多 个人分类: web前端   内容参考网友文章写成,原博的链 ...

  5. Centos7下搭建SVN服务,本地提交代码自动同步到WEB目录

    1.安装SVN服务[root@bogon ~]# yum -y install subversion 2.查看svnserve安装目录[root@bogon ~]# whereis svnserves ...

  6. 使用ajax提交form表单,包括ajax文件上传【转载】

    [使用ajax提交form表单,包括ajax文件上传] 前言 转载:作者:https://www.cnblogs.com/zhuxiaojie/p/4783939.html 使用ajax请求数据,很多 ...

  7. 使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html

    使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...

  8. ajax 中操作this,需要先在ajax的外面给this重新定义为_this!!

    //设置为默认收货地址 $(document).on('tap','.right_none',function(){ var _this = $(this); //只有这样定义,在ajax的内部才可以 ...

  9. 【python】-- 协程介绍及基本示例、协程遇到IO操作自动切换、协程(gevent)并发爬网页

    协程介绍及基本示例 协程,又称微线程,纤程.英文名Coroutine.一句话说明什么是协程:协程是一种用户态的轻量级线程. 协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和栈保存到其他 ...

随机推荐

  1. Kong管理UI -kong-dashboard

    本文仍然是在ubuntu18的环境下进行 https://github.com/PGBI/kong-dashboard kong dashboart如果要正常使用管理UI,前提为kong已经正常run ...

  2. 使用docker查看jvm状态,在docker中使用jmap,jstat

    Docker中查看JVM的信息: 1.     列出docker容器:docker ps 2.     标准输入和关联终端:docker exec -it 容器ID  bash 3.     查找出j ...

  3. Linux vim快捷键

    1  替换    r  替换  先按r再按要替换的内容 2  按yy复制当前行  按p是粘贴 3 # add at 18-10-25 #-------------------------------- ...

  4. 安卓打开远程调试(免root)

    首先用数据线连接adb,在pc端执行: adb tcpip 5555 然后就能拔掉数据线了. pc执行这个: adb connect 172.19.208.2 就能连接上

  5. EL(Expression Language)和JSTL标签(JSP Standard Tag Library)

    一.EL表达式: Expression Language提供了在 JSP 脚本编制元素范围外(例如:脚本标签)使用运行时表达式的功能.脚本编制元素是指页面中能够用于在JSP 文件中嵌入 Java代码的 ...

  6. 构建一个Vue项目

    一 我们需要安装vue.js Vue.js官网 当我们已经安装了vue-cli,那么我们需要更新Vue-cli. vue-cli3.0使用及配置 二 安装好了之后: 我们可以直接使用命令:mkdir ...

  7. 如何正确实现 Java 中的 HashCode

    相等 和 Hash Code 从一般角度来看,Equality 是不错的,但是 hash code 更则具技巧性.如果我们在 hash code上多下点功夫,我们就能了解到 hash code 就是用 ...

  8. Java 日期比较大小

    import org.junit.Test; import java.text.SimpleDateFormat; import java.util.Date; /** * @author DateJ ...

  9. springboot2系列目录

    参考:https://blog.csdn.net/cowbin2012/article/details/85254990 带源码

  10. Django 部署(Nginx+uwsgi)

    使用 uwsgi 来部署 安装 uwsgi sudo pip install uwsgi --upgrade 使用 uwsgi 运行项目 uwsgi --http :8001 --chdir /pat ...