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. Linux-php7安装redis

    Linux-php7安装redis 标签(空格分隔): 未分类 安装redis服务 1 下载redis cd /usr/local/ 进入安装目录 wget http://download.redis ...

  2. objc_clear_deallocating 与弱引用

    void *objc_destructInstance(id obj){ if (obj) { Class isa_gen = _object_getClass(obj); class_t *isa ...

  3. IDL build

    For Developers‎ > ‎Design Documents‎ > ‎ IDL build 目录 1 Steps 2 GYP 3 Performance 3.1 Details ...

  4. ResNet（深度残差网络）

    注:平原改为简单堆叠网络 一般x是恒等映射,当x与fx尺寸不同的时候,w作用就是将x变成和fx尺寸相同. 过程: 先用w将x进行恒等映射.扩维映射或者降维映射d得到wx.(没有参数,不需要优化器训练) ...

  5. BZOJ 3674: 可持久化并查集模板

    Code: #include <cstdio> #include <algorithm> #include <cstring> #include <strin ...

  6. vue引入iconfont阿里字体图标库以及报错解决

    下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader)  ,记得--save ...

  7. 洛谷3871 [TJOI2010]中位数 维护队列的中位数

    题目描述 给定一个由N个元素组成的整数序列,现在有两种操作: 1 add a 在该序列的最后添加一个整数a,组成长度为N + 1的整数序列 2 mid 输出当前序列的中位数 中位数是指将一个序列按照从 ...

  8. 「BZOJ3343」教主的魔法(分块+二分查找）

    题意: 给定一个数列,您需要支持以下两种操作:给[l,r]同加一个数询问[l,r]中有多少数字大于或等于v (n<=1000000,m<=3000) 题解 块内排序二分查询修改就用个数组存 ...

  9. 一 SSH 无密码登陆 & Linux防火墙 & SELinux关闭

    如果系统环境崩溃.   调用/usr/bin/vim /etc/profile   SHH无密码登陆 所有要做得节点上运行   修改 host name vi /etc/sysconfig/netwo ...

  10. 《Java设计模式》之装饰模式

    装饰模式(Decorator) 1.    装饰模式(Decorator)的定义:又名包装(Wrapper)模式.装饰模式以对client透明的方式扩展对象的功能,是继承关系的一个替代方案. 2.   ...