zoukankan      html  css  js  c++  java
  • js阻止form表单重复提交

    防止表单重复提交的方法总体来说有两种,一种是在js中阻止重复提交;另一种是在后台利用token令牌实现,大致思路是生成一个随机码放到session和form表单的隐藏输入框中,提交表单时两者对比,表单处理完毕清空或者修改session中的token。

    在js中处理简单易懂,同时能解决我现在所做的项目中的问题,目前暂用js处理,后期如有需要再研究token机制。代码如下:

    1、表单提交后禁用提交按钮(在本项目中表单提交完成后,如果处理成功都把form表单关掉了)

     1 /**
     2  * form表单格式验证通过之后、表单提交前将提交按钮禁用(注意顺序)
     3  * @param submitBtnId 提交按钮ID
     4  * @param btnType 按钮类型 'button'或者'linkbutton'
     5  * @returns {Boolean}
     6  */
     7 function disableSubmitBtn(submitBtnId, btnType){
     8   if(btnType == 'button'){
     9     $("#"+submitBtnId).attr("disabled","disabled");
    10   }else if(btnType == 'linkbutton'){
    11     $("#"+submitBtnId).linkbutton('disable');
    12   }
    13   return true;
    14 }

    由于在项目中有用到普通button和easyUI的linkbutton两种按钮,而禁用这两种按钮的方法不同,所以需要多传一个参数btnType(按钮类型)

    2、如果提交表单失败则启用按钮,以便用户修改内容后再次提交

     1 /**
     2  * form表单提交失败后将提交按钮开启,以便用户修改数据后再次提交
     3  * @param submitBtnId 提交按钮ID
     4  * @param btnType 按钮类型 'button'或者'linkbutton'
     5  * @returns {Boolean}
     6  */
     7 function enableSubmitBtn(submitBtnId, btnType){
     8   if(btnType == 'button'){
     9     $("#"+submitBtnId).removeAttr("disabled");
    10   }else if(btnType == 'linkbutton'){
    11     $("#"+submitBtnId).linkbutton('enable');
    12   }
    13   return true;
    14 }

    3、在每次表单提交时调用这两个方法,具体放的位置根据实际业务逻辑而定

  • 相关阅读:
    [leetcode] Bulls and Cows
    Win7 系统所有应用颜色调整
    一道题反映Java的类初始化过程
    翻转二叉树(深搜-先序遍历-交换Node)
    在一个数组中,除了两个数外,其余数都是两两成对出现,找出这两个数,要求时间复杂度O(n),空间复杂度O(1)
    一道随机函数题:由rand5()生成rand7()
    求一条直线通过的最大点数
    菜根谭#236
    菜根谭#235
    菜根谭#234
  • 原文地址:https://www.cnblogs.com/lujiulong/p/6020303.html
Copyright © 2011-2022 走看看