发布于 2017-03-09 09:55:35 | 120 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


这篇文章主要介绍了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>

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>

以上所述是小编给大家介绍的JavaScript禁止用户多次提交的两种方法的相关资料,希望对大家有所帮助!



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务