环境配置:
系统:Linux 7.8
语言:PHP
框架:Laravel 5.8
主要技术:JQuery、PHP、Cache
问题重现:
当需要一个自然月客户只能订购一次产品时,客户重复点击提交按钮重复提交表单导致系统多次创建订单。
思路及步骤
- 一上来我认为这个问题很简单,直接在用户单击提交【按钮】之后,直接禁用此按钮,代码如下:(图示代码为公共方法,想给所有具有提交的属性的按钮都加上[submit_btn]类)
$(".submit_btn").click(function () { $(this).attr("disabled", "true"); });
但是很快我就在测试环节发现了问题,这样写之后表单不能提交了,除非在后面添加一行JS提交表单的代码,但是由于是公共方法,遂放弃。
后来我接着尝试在form表单上做文章,我尝试用JQuery监听form表单提交,然后禁用[submit_btn]按钮。代码如下:
$(".click_loading_form").submit(function () { $('.submit_btn').attr("disabled", "true"); //禁用按钮 showLoading();//显示加载动画 });
至此;这个问题算是暂时解决了。
但是过了几天还发现有重复的,我第一时间想到可能是用户浏览器对于JQuery支持的问题,可能是JS代码没有执行。
- 继续,前端兼容一直是我的痛,我只是个后端程序员,所以开始在后端控制器想办法,于是想到使用缓存(Cache)。当用户提交之后设置一个30s自动过期的键值对,如果用户提交这个键值对存在的话,直接返回稍后提交,代码如下:
公共方法PHP:Class GlobalApproachController
作用:用户判断$key是否存在,存在返回true,不存在创建$key,30s过期释放并返回false
/** * @description: 防止用户重复提交数据 * @param String $key ------- 键 * @return Boolean */ public static function preventDuplicateSubmitData($key) { if (cache()->has($key)) { return true; } cache([$key => 1], Carbon::now()->addSeconds(30)); return false; }
控制器业务方法:
if (GlobalApproachController::preventDuplicateSubmitData('orderMealCache')) { // 返回 请勿重复点击/订购 }
至此,算是解决问题了。
第二种方法算是比较合理的方法,目前生产环境,方法一和二都在使用。