加载中,请等待div:

  1. <div id="load" class="center-in-center" style="display:none;">
  2. <img src="../resources/images/loader.gif" />加载中,请等待...
  3. </div>
  1. 确定重置按钮:
  1. <div class="form-group row">
  2. <div class="conf" style="float: left" onclick="conf()" id="conf">确定</div>
  3. <div class="reset" style="float: left" onclick="reset()" id="reset">重置</div>
  4. </div>
  1. 加载中,请等待效果图的CSS样式,设置其至页面中央:
  1. .center-in-center{
  2. position: absolute;
  3. top: %;
  4. left: %;
  5. -webkit-transform: translate(-%, -%);
  6. -moz-transform: translate(-%, -%);
  7. -ms-transform: translate(-%, -%);
  8. -o-transform: translate(-%, -%);
  9. transform: translate(-%, -%);
  10. }

ajax提交代码:

  1. $.ajax({ type: 'POST',
  2. url: "",
  3. data: {},//json数据
  4. beforeSend:function(XMLHttpRequest){
  5. $("#load").show();
  6. $("#conf").removeAttr("onclick");//提交过程中,将确定按钮设置为不可点击(方法1)
  7. // $('#conf').attr('onclick','javascript:void(0);');//将按钮设置为不可点击 (方法2)
  8. },
  9. success: function(resultMessage){
  10. $("#load").hide();
  11. var resultMessage = eval('(' + resultMessage + ')');
  12. alert(resultMessage.result);
  13. if(resultMessage.result){
  14. alert(resultMessage.message);
  15. $("#conf").attr("onclick","conf();");//提交成功,将按钮设置为可点击
  16. }else{
  17. alert(resultMessage.message);
  18. $("#conf").attr("onclick","conf();");
  19. }
  20. },
  21. // dataType: dataType });
  1. 加载中,请等待操作为:在beforeSend$("#load").show()显示图片,在success$("#load").hide()隐藏图片即可
  1. 按钮提交限制操作:分别在beforeSend中设置按钮不可提交,然后提交成功后在success中再次设置按钮可提交即可
  1.  
  1.  

Javascript在ajax提交过程中页面显示加载中,请等待效果,并在提交过程中限制确定按钮防止多次提交,提交完成后,解除提交限制的更多相关文章

  1. 关于asp.net中页面事件加载的先后顺序

    一.ASP.NET 母版页和内容页中的事件 母版页和内容页都可以包含控件的事件处理程序.对于控件而言,事件是在本地处理的,即内容页中的控件在内容页中引发事件,母版页中的控件在母版页中引发事件.控件事件 ...

  2. jquery 中dataTable显示加载中,图片或文字

    引入js文件 <script type="text/javascript" src="${basePath}/lib/datatables/1.10.0/jquer ...

  3. 给 Chrome浏览器 添加 Javascript小书签,查看当前页面全部加载的javascript文件及代码片段

    小书签又名 Bookmarklet,由英文单词 Bookmark 和 Applet 组合而来.简单地说,小书签就是把一段带有特定功能的 JavaScript 代码保存至收藏夹,当你需要的时候点击它来实 ...

  4. WP8.1程序开发中,如何加载本地文件资源或安装在程序包中的资源。

    Web 要访问来自 Web 的文件,你可以使用标准的绝对 HTTP URI: <img src="http://www.contoso.com/images/logo.png" ...

  5. 页面第一次加载,JS没有效果,刷新一下就好了

    问题详述:页面跳转的时候,第一个第二个页面都没有问题,跳到第三个页面,JS脚本没有起作用,刷新一下就好了. 1.猜测:第一个页面和第二个页面的JS,会对第三个页面产生影响,(因为之前没有这个问题,只改 ...

  6. HBuilder mui 手机app开发 Android手机app开发 ios手机app开发 打开新页面 预加载页面 关闭页面

    创建子页面 在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题: mui的解决思路是:将需要滚动的区域通过单独的webview实 ...

  7. Asp.Net页面(母版页)加载顺序

    ASP.NET 母版页和内容页中的事件 母版页和内容页都可以包含控件的事件处理程序.对于控件而言,事件是在本地处理的,即内容页中的控件在内容页中引发事件,母版页中的控件在母版页中引发事件.控件事件不会 ...

  8. yii2 如何在页面底部加载css和js

    作者:白狼 出处:www.manks.top/article/yii2_load_js_css_in_end 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接 ...

  9. js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面

    js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了, ...

随机推荐

  1. PHP/HTML混写的四种方式

    [整理]PHP/HTML混写的四种方式   PHP作为一款后端语言,为了输出给浏览器让浏览器呈现出来,无可避免的要输出HTML代码,下文介绍下我用过的三种PHP/HTML混编方法 1.单/双引号包围法 ...

  2. sed删除注释行和空行

    典型需求: 删除nginx.conf文件中注释行和空行 sed -i '/^#/d;/^$/d' nginx.conf 删除一个或多个空格加 # 号的行 sed -i '/[:blank:]*#/d' ...

  3. 1571. [Usaco2009 Open]滑雪课Ski

    传送门 可以想到 $dp$,设 $f[i][j]$ 表示当前等级为 $i$,时间为 $j$ 的最大滑雪次数 显然上课不会上让自己等级降低的课,所以第一维 $i$ 满足无后效性 然后直接枚举 $i,j$ ...

  4. c# 获取 Apk ,Aar 文件包名

    最近项目有个需求,需要拿到前端上传的Apk或者Aar文件里面的包名. 在这里贡献出来,方便有需求的小伙伴. 项目是 asp.net core 2.2 需要安装 nuget : AndroidXml S ...

  5. Linux拷贝、移动、删除

    cp:拷贝文件或文件夹(copy) - cp original_filename copy_filename(在当前目录生成拷贝文件,并改名为copy_filename) - cp original_ ...

  6. 使用纯php构建一个简单的PHP服务器

    使用原生PHP构建一个简单的PHPWeb服务器 1.目录机构 webserver --src -- Response.php -- Server.php -- Request.php -- vendo ...

  7. rabbitMQ实现推迟队列

    一. 使用原生Api 1.RabbitMQ 相关 <dependency> <groupId>com.rabbitmq</groupId> <artifact ...

  8. Swoole 的运行模式

    Swoole 做了什么 Swoole 是 php 的一个扩展,但是他又不是普通的扩展,其最明显的特点就是:一但运行后就会接管PHP的控制权,进入事件循环. 当某种IO事件发生时, Swoole 会回调 ...

  9. React(1) --新建项目

    搭建React开发环境之前的准备工作 1.必须要安装node.js (注意:安装node.js稳定版本) 2.安装cnpm,用cnpm替代npm npm install -g cnpm --regis ...

  10. hadoop_hdfs_上传文件报错

    错误提示: INFO hdfs.DFSClient: Exception in createBlockOutputStream java.io.IOException: Bad connect ack ...