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

时间:2022-09-07 10:29:02

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

加载中,请等待div:

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

ajax提交代码:

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

														
		

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

  1. 关于asp&period;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&period;1程序开发中,如何加载本地文件资源或安装在程序包中的资源。

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

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

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

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

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

  7. Asp&period;Net页面&lpar;母版页&rpar;加载顺序

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

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

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

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

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

随机推荐

  1. 端口扫描&lpar;TCP&rpar;

    还待优化... #include <string.h> #include <WinSock.h> #include <stdio.h> #pragma commen ...

  2. Vagrant error&colon; Your VM has become inaccessible&period;

    博客转自:http://doodlebobbers.com/vagrant-error-your-vm-has-become-inaccessible/ If you’ve deleted a vir ...

  3. 【转载】div层调整zindex属性无效原因分析及解决方法

    在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置Z-INDEX属性无效.在CSS中,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用有个小小前提,就是元素的pos ...

  4. python学习之subprocess模块

    subprocess.Popen 这个模块主要就提供一个类Popen: class subprocess.Popen( args, bufsize=0, executable=None, stdin= ...

  5. 【Django】基于Django架构网站代码的目录结构

     经典的Django项目源码目录结构 Django在一个项目的目录结构划分方面缺乏必要的规范.在Django的官方文档中并没有给出大型项目的代码建议目录结构,网上的文章也是根据项目的不同结构也有适当的 ...

  6. 解决OpenWrt多拨刚开机拨号只拨上一次问题

    红色标注为需要权限755/etc/ppp/ip-up.d/ip-up: 一旦 PPP 连结建立后, pppd 会找寻 /etc/ppp/ip-up 指令稿 如果这个指令稿存在并且可以执行的话,那么 P ...

  7. Js把IE COM数组列表转换成数组

    今天写组件的时候遇到一个问题,就是当我需要对获取到的对象列表进行删减的时候,发现没有合适的方法,比如: //获取图片列表 var imgs = document.getElementsByTagNam ...

  8. 使用java&period;util&period;Properties类读写配置文件

    J2SE 1.5 以前的版本要求直接使用 XML 解析器来装载配置文件并存储设置,虽说也并非难事,相比 java.util.Properties却要做额外的解析工作.而java.util.Proper ...

  9. &period;Net core----mongodb在插入数据时,会产生时间差的问题

    今天在给mongodb插入日期格式的数据时发现,日期时间相差8个小时,原来存储在mongodb中的时间是标准时间UTC +0:00,而中国的时区是+8.00 . 因此在插入的时候需要对时间进行处理: ...

  10. python 配置文件返回的两种方式,写法不一样而已

    配置文件如下: [MODE]mode:{ "register":"all"} 或者 mode = {"register":"all ...