POST/REDIRECT/GET模式下表单重复点击提交跳转异常问题咨询

问题核心原因 #

连续点击提交导致异常的本质是现有PRG流程缺少请求幂等校验，纯前端按钮禁用方案未生效，通常是因为事件绑定逻辑没有覆盖所有表单提交场景，且没有后端兜底防护，无法拦截时序上重叠的重复POST请求。 #

第一层：后端幂等防护（必做，从根源阻断重复请求） #

核心思路是给每个表单生成一次性有效令牌，请求到达后端时第一时间校验令牌，仅第一个携带有效令牌的请求可以执行业务逻辑，后续重复请求直接拦截跳转，完全不碰业务代码。

• 表单渲染阶段（form.php）生成令牌存入Session，同时注入表单隐藏域：

// 表单渲染前执行
$formToken = bin2hex(random_bytes(16));
// 令牌标记未使用，设置5分钟有效期
$_SESSION['form_tokens'][$formToken] = [
    'used' => false,
    'expire' => time() + 300
];

表单内新增隐藏域：

<input type="hidden" name="form_token" value="<?php echo $formToken; ?>">

• POST请求入口（post.php）最优先做令牌校验，原有业务逻辑放在校验通过之后：

if ($_SERVER['REQUEST_METHOD'] == 'POST'):
    // 优先校验表单令牌
    $submittedToken = $_POST['form_token'] ?? '';
    $isValidRequest = false;
    if (isset($_SESSION['form_tokens'][$submittedToken])) {
        $tokenConfig = $_SESSION['form_tokens'][$submittedToken];
        if (!$tokenConfig['used'] && $tokenConfig['expire'] > time()) {
            // 标记令牌为已使用，后续同令牌请求全部失效
            $_SESSION['form_tokens'][$submittedToken]['used'] = true;
            $isValidRequest = true;
        }
        // 已校验过的令牌直接删除，释放Session空间
        unset($_SESSION['form_tokens'][$submittedToken]);
    }

    // 无效/重复请求直接跳转，不执行业务逻辑
    if (!$isValidRequest) {
        // 支付场景可根据已生成的订单状态跳对应页面，这里示例跳表单页/订单页
        header("Location: /myscript/");
        exit();
    }

    // 原有业务逻辑保留
    switch ($_POST['submit']):
        case 'MyButtonName1':
            $_SESSION['postdata'] = $_POST;
            $postdata = $_SESSION['postdata'];
            unset($_POST);
            // 业务处理：订单创建、扣款预校验等逻辑
            $_SESSION["success"] = "表单提交成功";
            // 支付场景直接跳转支付页
            header("Location: /payment/");
            unset($postdata);
            exit();
            break;
        case 'MyButtonName2':
            // 其他表单逻辑复用相同校验规则即可
            break;
    endswitch;
    exit();
endif;

这套逻辑下，即使用户一秒内点击十次提交，只有第一个到达后端的请求能执行业务流程，剩下的请求会被直接拦截跳转，不会出现重复扣款、跳转被跳过的问题。 #

第二层：前端交互优化（修复之前JS禁用失效的问题） #

之前前端禁用按钮不生效，大多是因为错误绑定了按钮的click事件，无法覆盖回车提交、快速连续点击的时序问题，应该直接监听表单的submit事件做禁用，同时处理浏览器往返缓存导致的按钮状态异常：
在form.php底部加入如下脚本：

document.addEventListener('DOMContentLoaded', () => {
    const targetForm = document.querySelector('form[action="/post/"]');
    const submitBtn = targetForm.querySelector('button[type="submit"]');
    const defaultBtnText = submitBtn.textContent;

    // 监听表单提交事件，覆盖所有提交场景
    targetForm.addEventListener('submit', () => {
        submitBtn.disabled = true;
        submitBtn.textContent = '提交中，请稍候...';
    });

    // 处理浏览器往返缓存（bfcache）场景，用户从其他页面返回时重置按钮状态
    window.addEventListener('pageshow', (e) => {
        if (e.persisted) {
            submitBtn.disabled = false;
            submitBtn.textContent = defaultBtnText;
        }
    });
});

支付场景额外注意项 #

• 订单创建逻辑要生成唯一订单号，和表单令牌绑定，重复请求到达时如果已经生成过订单，直接跳转对应订单的支付页即可，不要重复创建订单、触发扣款
• 支付回调接口也要做幂等校验，以支付渠道返回的唯一流水号为依据去重，避免回调重复通知导致的多次入账

内容的提问来源于stack exchange，提问作者Gaming mail