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

方案:

  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. git与github区别与简介

    From: https://blog.csdn.net/skyxmstar/article/details/65631658 git和github是两个完全不同的概念. git 是一个版本管理工具,是 ...

  2. sqlserver存储过程sp_send_dbmail邮件(html)实际应用

    前段时间因工作需求,特地学习了下sp_send_dbmail的使用,发现网上的示例对我这样的菜鸟太不友好/(ㄒoㄒ)/~~,好不容易完工来和大家分享一下,不谈理论,只管实践! 如下是实际需求: -- ...

  3. micrometer自定义metrics

    micrometer提供了基于Java的monitor facade,其与springboot应用和prometheus的集成方式如下图展示 上图中展示的很清楚,应用通过micrometer采集和暴露 ...

  4. java中拼接两个对象集合

    目标:  根据两个list中每条记录的某个属性是否相同来拼接. 1.首先定义一个字符串 String str = "[{\"ITEMID\":2,\"ITEMN ...

  5. 知识点:Java 集合框架图

    知识点:Java 集合框架图 总结:Java 集合进阶精讲1 总结:Java 集合进阶精讲2-ArrayList Java集合框架图 我们经常使用的Arrayist.LinkedList继承的关系挺复 ...

  6. Linux下安装jdk8步骤详述

    作为Java开发人员,在Linux下安装一些开发工具是必备技能,本文以安装jdk为例,详细记录了每一步的操作命令,以供参考. 0.下载jdk8 登录网址:http://www.oracle.com/t ...

  7. Git分支merge和rebase的区别

    Git merge是用来合并两个分支的. git merge b # 将b分支合并到当前分支 同样 git rebase b,也是把 b分支合并到当前分支 原理 如下: 假设你现在基于远程分支&quo ...

  8. web socket

    @ServerEndpoint("/my-websocket") @Component public class MyWebSocket { protected final Log ...

  9. 先 FROM 后 WHERE 再 GROUP BY 再 SELECT 再 order BY

    shutdown -r -t 5office:515740906family-asus:786512915office-T420i:837829568 family-T420:868 638 325 ...

  10. Win10系统进行远程桌面连接出现身份验证错误怎么办

    在win10系统中,自带有远程桌面连接功能,但是有时候会遇到一些问题,比如有不少用户反映说在进行远程桌面连接的时候,出现身份验证错误的情况,导致远程连接失败,接下来给大家分享一下Win10系统进行远程 ...