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

一、实例描述

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

二、截图

三、代码

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="utf-8">

     <title>课堂演示</title>

     <style type="text/css">

      input{

       margin: 10px;

       width: 100px;

       height: 30px;

     }

     </style>

 </head>

 <body>

 <input type=button value="提交" onClick="check()">

 <script type="text/javascript">

     function check(){

         if (window.document.readyState == 'complete'){

             alert("加载完毕，可以继续"); 

             return true;

         }else{

             alert("正在处理，请等待！");

             return false; 

         }

     }

 </script>

 </body>

 </html>

1、判断document的状态

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

3、document的readyState属性

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

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

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

四、总结

案例要点：

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

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

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

js防止提交数据之后的按钮连击的更多相关文章

  1. js 批量提交数据

    // 批量提交数据 let pageSize = 100, total = dataTmp.length, list = dataTmp let totalPage = Math.ceil(total ...

  2. js提交数据时需判断是点击事件还是回车键

    使用回车键实质还是点击事件==回车时将焦点聚居在某个标签上. Html代码: <div id="btlogin" class="btlogin">& ...

  3. 转载 ----HTML5 ---js实现json方式提交数据到服务端

    json提交给服务器我们在提交之前需要通过js的相关函数来把数据转换成json格式的数据再进行post或get了,下面来看看.   大概需求就是前端要把数据组装成json,传给后端.首先,在客户端,通 ...

  4. js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  5. yii防止延迟用户多次点击按钮重复提交数据

    是不是被用户的行为所困扰? 一. 一个表单用户点击提交按钮了N次,这也导致了数据提交了N次. 为了此受到了测试的欺辱,受到了老板的批评? 不用怕,它就是来拯救你的. 第一步:打开命令行,敲入 comp ...

  6. 使用jquery.form.js的ajaxsubmit方法提交数据的Bug

    周五同事遇到一个很奇怪的问题,调到下班,虽然问题解决了,但是不知道问题的具体原因,回来翻了翻代码,才发现症结所在,下面就分享出来,供遇到同样问题的同行们参考: 先把问题描述一下,做的功能是使用ajax ...

  7. HTML--使用提交按钮，提交数据

    在表单中有两种按钮可以使用,分别为:提交按钮.重置.这一小节讲解提交按钮:当用户需要提交表单信息到服务器时,需要用到提交按钮. 语法: <input type="submit" ...

  8. ASP.NET MVC View向Controller提交数据

    我们知道使用MVC的一个很重的的用途就是把Controller和View之间进行解耦,通过控制器来调用不同的视图,这就注定了Controller和View之间的传值是一个很重的知识点,这篇博文主要解释 ...

  9. 向php提交数据及json

    php中提交表单有两种方法,即: (1)利用表单提交 例: <form action="php文件名" method='提交方式'> username:<inpu ...

随机推荐

  1. Magento-设置产品显示的条数和默认条数

    在Block/Product/List/Toolbar.php里面,控制每页显示条数和默认条数的方法如下: 1.每页显示条数: protected function _getAvailableLimi ...

  2. 【Git 一】Linux安装Git

    一.Git 的优势 #简单说一下 Git 的优势. 1.版本库本地化,支持离线提交,相对独立不影响协同开发. 2.支持快速切换分支方便合并,比较合并性能好. 3.分布式管理,适应不同的业务场景. 4. ...

  3. 【Codeforces Round #420 (Div. 2) C】Okabe and Boxes

    [题目链接]:http://codeforces.com/contest/821/problem/C [题意] 给你2*n个操作; 包括把1..n中的某一个数压入栈顶,以及把栈顶元素弹出; 保证压入和 ...

  4. MyBatis学习总结（10）——批量操作

    一.mybatis中的批量操作    批量操作核心就是一次传入多个数据然后进行相关操作,增删改查中掌握其中一个其他的也不成问题 1.最新在做的短信平台,要批量插入群发的短信记录: 当然批量操作还有:批 ...

  5. 【转】NPOI使用手册

    [转]NPOI使用手册 NPOI使用手册 目录 1.认识NPOI 2. 使用NPOI生成xls文件 2.1 创建基本内容 2.1.1创建Workbook和Sheet 2.1.2创建DocumentSu ...

  6. Python 调用snmp自定义OID实现监控

    http://kkkkkk.blog.51cto.com/468162/1172726 http://blog.csdn.net/mirahs/article/details/49619729

  7. HotSpotVM的Java堆实现浅析#1：初始化

    今天来看看HotSpotVM的Java堆初始化. Universe Java堆的初始化主要由Universe模块来完毕,来看下Universe模块初始化的代码,universe_init. jint ...

  8. CSS3 实现RSS图标

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 实现RSS图标&l ...

  9. PPAPI中使用Chromium的3D图形接口

    使用PPAPI的Graphics 3D接口做了一个小演示样例,鼠标点击插件区域.绘制颜色,效果与ppapi_simple相似. foruok原创,如需转载请关注foruok的微信订阅号"程序 ...

  10. thinkphp5项目--企业单车网站（二）

    thinkphp5项目--企业单车网站(二) 项目地址 fry404006308/BicycleEnterpriseWebsite: Bicycle Enterprise Websitehttps:/ ...