微信扫一扫打赏支持

js防止提交数据之后的按钮连击

js防止提交数据之后的按钮连击

一、实例描述

当页面提交的数据特别多时，页面会反应比较迟钝，此时如果用户等不及而连续单击按钮，导致数据重复提交。本案例就是为了防止数据重复提交。

 

二、截图

 

三、代码

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>课堂演示</title>
 6     <style type="text/css">
 7      input{
 8       margin: 10px;
 9       width: 100px;
10       height: 30px;
11     }
12     </style>    
13 </head>
14 <body>
15 
16 <input type=button value="提交" onClick="check()">
17 
18 <script type="text/javascript">
19     function check(){
20         if (window.document.readyState == 'complete'){
21 
22             alert("加载完毕，可以继续"); 
23 
24             return true;
25 
26         }else{
27 
28             alert("正在处理，请等待！");
29 
30             return false; 
31 
32         }
33     }
34 </script>
35 
36 </body>
37 </html>

1、判断document的状态

2、window对象和document对象的层级关系

3、document的readyState属性

4、防止连击的方法：添加点击事件，提示用户处理进程

5、js中等于号写法，和php，java，c++都一样

6、这里字符串用的单引号

 

 

 

四、总结

案例要点：

本例的重点是如何判断页面的状态。

readyState 属性返回当前文档的状态,该属性返回以下值:

  • uninitialized - 还未开始载入
  • loading - 载入中
  • interactive - 已加载，文档与用户可以开始交互
  • complete - 载入完成

 

posted @ 2018-04-29 10:27  范仁义  阅读(1176)  评论(0)  编辑  收藏  举报