zoukankan      html  css  js  c++  java
  • JavaScript禁止用户多次提交方法

    【当服务器超载时,会出现提交卡顿的现象,但是用户在操作时,会不停重复点击提交,会造成服务器压力更大。所以我们需要进行限制】

    [1]将提交按钮禁止

    <html>

      <head>

        <script>

          //禁止默认行为   因为这里要模拟服务器超载的时候,所以需要先禁止掉submit按钮自动提交的功能

        function preventDef(event){

          event=event||window.event;

          if(event.preventDefault){

            return event.preventDefault;

            }else{

             return event.returnValue=false;

            }

          }

        window.onload=function(){

        var form=document.getElementsByTagName('form')[0];      //获取到form元素

        var txt=form.elements['txt'];                    //获取到name属性为txt的表单元素

        var sub=form.elements['sub'];                    //获取到name属性为sub的表单元素

        form.onsubmit=function(event){                  //创建一个提交事件,因为submit是form来提交事件的,所以我们要禁止也需要通过form来禁止

          event=event || window.event;                  

          preventDef(event);                      //禁止掉默认提交行为

          sub.disabled=true    //第一种就是在用户提交完之后,将按钮禁用不再让用户提交,等待提交完毕之后再释放按钮

          

          setTimeout(function(){                    //模拟5秒钟后再提交

          form.submit()},5000);

        }

    }

        </script>

      </head>

      <body>

        <form id="form">

          <input type="text" id="txt" name="txt">

          <input type="submit" id="sub">

        </form>

      </body>

    </html>

    -------------------------------------------------------------------------------------------------------

    [第二种 创建一个变量进行判断]

    [1]将提交按钮禁止

    <html>

      <head>

        <script>

          //禁止默认行为   因为这里要模拟服务器超载的时候,所以需要先禁止掉submit按钮自动提交的功能

        function preventDef(event){

          event=event||window.event;

          if(event.preventDefault){

            return event.preventDefault;

            }else{

             return event.returnValue=false;

            }

          }

        window.onload=function(){

        var form=document.getElementsByTagName('form')[0];      //获取到form元素

        var txt=form.elements['txt'];                    //获取到name属性为txt的表单元素

        var sub=form.elements['sub'];                    //获取到name属性为sub的表单元素

        var  flag=true;                            //先创建一个变量,表示默认的时候用户还没点击提交

        form.onsubmit=function(event){                  //创建一个提交事件,因为submit是form来提交事件的,所以我们要禁止也需要通过form来禁止

          event=event || window.event;                  

          preventDef(event);                      //禁止掉默认提交行为

           if(flag==true){

              flag=false;                    //表示用户已经点击过提交按钮

          }else{

            alert('正在提交,请勿重复提交');          

          }

          

          setTimeout(function(){                    //模拟5秒钟后再提交

          form.submit()},5000);

        }

    }

        </script>

      </head>

      <body>

        <form id="form">

          <input type="text" id="txt" name="txt">

          <input type="submit" id="sub">

        </form>

      </body>

    </html>

  • 相关阅读:
    第二部分 高数_9 优化
    第二部分 高数_8 泰勒公式、麦克劳林公式和线性化
    第二部分 高数_7 二元符合函数的求导法则
    第二部分 高数_6 高阶偏导数
    第二部分 高数_5 多元函数的导数
    第二部分 高数_4 函数的积分
    第二部分 高数_3 函数的微分
    第二部分 高数_2 导数
    第二部分 高数_1 极限
    第一部分 现代_4 特征值和特征向量
  • 原文地址:https://www.cnblogs.com/Mesiky/p/5700855.html
Copyright © 2011-2022 走看看