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提交过程中页面显示加载中,请等待效果,并在提交过程中限制确定按钮防止多次提交,提交完成后,解除提交限制的更多相关文章
- 关于asp.net中页面事件加载的先后顺序
一.ASP.NET 母版页和内容页中的事件 母版页和内容页都可以包含控件的事件处理程序.对于控件而言,事件是在本地处理的,即内容页中的控件在内容页中引发事件,母版页中的控件在母版页中引发事件.控件事件 ...
- jquery 中dataTable显示加载中,图片或文字
引入js文件 <script type="text/javascript" src="${basePath}/lib/datatables/1.10.0/jquer ...
- 给 Chrome浏览器 添加 Javascript小书签,查看当前页面全部加载的javascript文件及代码片段
小书签又名 Bookmarklet,由英文单词 Bookmark 和 Applet 组合而来.简单地说,小书签就是把一段带有特定功能的 JavaScript 代码保存至收藏夹,当你需要的时候点击它来实 ...
- WP8.1程序开发中,如何加载本地文件资源或安装在程序包中的资源。
Web 要访问来自 Web 的文件,你可以使用标准的绝对 HTTP URI: <img src="http://www.contoso.com/images/logo.png" ...
- 页面第一次加载,JS没有效果,刷新一下就好了
问题详述:页面跳转的时候,第一个第二个页面都没有问题,跳到第三个页面,JS脚本没有起作用,刷新一下就好了. 1.猜测:第一个页面和第二个页面的JS,会对第三个页面产生影响,(因为之前没有这个问题,只改 ...
- HBuilder mui 手机app开发 Android手机app开发 ios手机app开发 打开新页面 预加载页面 关闭页面
创建子页面 在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题: mui的解决思路是:将需要滚动的区域通过单独的webview实 ...
- Asp.Net页面(母版页)加载顺序
ASP.NET 母版页和内容页中的事件 母版页和内容页都可以包含控件的事件处理程序.对于控件而言,事件是在本地处理的,即内容页中的控件在内容页中引发事件,母版页中的控件在母版页中引发事件.控件事件不会 ...
- yii2 如何在页面底部加载css和js
作者:白狼 出处:www.manks.top/article/yii2_load_js_css_in_end 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接 ...
- js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面
js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了, ...
随机推荐
- thymeleaf 下拉选框回显选中
参考了许多,最后以这种方法实现了.尽管有些愚蠢,初步学习阶段.不知道为什么用th:field会报错.网上有些是用field来解决回显问题的. <select name="positio ...
- ThreadLocal和单例对象比较
单例对象: 自始至终只有一个对象 当线程并发,每个线程需要自己独立的资源变量处理不同的业务时,单例对象远远不能满足需求 因此可以采用ThreadLocal模式 : 每个线程有自己独立的资源变量 ...
- HNOI2019fish
\({\rm fish}\) 20分: 六个for,点积判锐角钝角. #include <vector> #include <queue> #include <cmath ...
- java虚拟机笔记-1
java虚拟机学习笔记 Java技术的核心就是Java虚拟机,因为所有的Java程序都在虚拟机上运行.Java程序的运行需要Java虚拟机.Java API和Java Class文件的配合.Java虚 ...
- 最短路 dijkstra算法
题目 给定n个点的带权有向图,求从1到n的路径中边权之和最小的路径. dijkstra实现方法 用dist[i]表示i这个点到原点的最短距离,一开始初始化为无穷大,然后将原点设为0. 用ok[i]表示 ...
- [HDU 5293]Tree chain problem(树形dp+树链剖分)
[HDU 5293]Tree chain problem(树形dp+树链剖分) 题面 在一棵树中,给出若干条链和链的权值,求选取不相交的链使得权值和最大. 分析 考虑树形dp,dp[x]表示以x为子树 ...
- Java的socket编程中关于bufferedWriter的发送问题
BufferedWriter bw=new BufferedWriter(new OutputStreamWriter(socket.getOutputStream())); String send ...
- 双指针---有序数组的TWO SUM
双指针思想,主要用于遍历数组,两个指针指向不同的元素,从而协同完成任务. 有序数组的 Two Sum Leetcode :167. Two Sum II - Input array is sort ...
- 你创不出伟大的事业,因为……
你认为自己是对的,而别人都不了解.你忙著实现自己的梦想,却不管你的梦想对这世界有什么意义.你成天想著自己的问题,对别人的问题却提不起任何兴趣. 你活在自己的世界 你认为自己是对的,而别人都不了解.你忙 ...
- JavaScript中的反柯里化
转载自:https://www.cnblogs.com/zztt/p/4152147.html 柯里化 柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函 ...