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. POJ 4007 Flood-it!

    题目:http://poj.org/problem?id=4007 思路: (lyd学长的思路) IDA*算法,首先迭代加深限制搜索深度. 可以发现如果当前矩阵中除了左上角的连通块之外,共有M种颜色, ...

  2. Metasploit的攻击实例讲解----ms10_046快捷方式图标漏洞

    不多说,直接上干货! 准备工具 1.Kali linux 2016.2(Rolling)系统  IP:  192.168.1.103 2.受害者机子(windows XP系统)   IP: 10.10 ...

  3. Maven（一）之Maven入门

    一.Maven简介 Maven可以翻译为“知识的积累”.“专家”.“内行”.作为Apache组织中的一个颇为成功的开源项目,Maven主要服务于基于Java平台的项目构建.依赖管理.和项目信息管理.M ...

  4. win环境操作mysql

    第一步:登录数据库 第二步:查看数据库 第三步:进入数据库 第四步:创建表 第五步:删除数据库 第六步:进入数据库查看表状态

  5. null, undefined理解

    概述 null与undefined都可以表示"没有",含义非常相似.将一个变量赋值为undefined或null,语法效果几乎没区别. var a = undefined; // ...

  6. DELL T430进RAID的方式：， 硬盘损坏后的处理方式

    **DELL T430 新机安装2块硬盘后进RAID的方式: ** 一. BIOS更改 1.改启动方式为RAID mode  : 开机按F2进入BIOS 界面 --->System BIOS - ...

  7. [NOIP2010提高组]引水入城

    题目:洛谷P1514.Vijos P1777.codevs1066. 题目大意:有一个$n×m$的矩阵,每个点都有一个高度,可以在第一行的任意点建立蓄水厂.现在要把水输到最后一行的所有点上,规定水只能 ...

  8. 【Henu ACM Round#20 D】 Devu and Partitioning of the Array

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 一开始所有的数字单独成一个集合. 然后用v[0]和v[1]记录集合的和为偶数和奇数的集合它们的根节点(并查集 然后先让v[0]的大小 ...

  9. ArcGIS api for javascript——放大时切换图层

    描述 本例展示了如何在地图里指出显示的缓存或切片的细节等级(LODs).当打开示例地图,可以看到一些来自ArcGIS Online ESRI_Imagery_World_2D图层的影像.这个应用程序配 ...

  10. Ubuntu14环境下minigui安装问题记录--object.lo错误

    minigui3.0.12在Ubuntu14上面编译只是去?出现这个错误:object.h:275:9: error: incompatible types when assigning to typ ...