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 - 载入完成