前端一劳永逸解决重复提交问题：用拦截器拒绝捣乱者

前端开发中，用户在快速点击时可能会导致重复提交，从而影响应用程序的正常运行和用户体验。因此，需要在前端实现防止重复提交的机制。

本文将介绍一种简单而有效的方法，使用 JavaScript 来实现重复提交的拦截和阻止。

首先，在 HTML 表单中添加一个隐藏的输入字段，并将其命名为 "submitToken"。这个字段的值将用于存储一个随机生成的令牌，用于验证提交的合法性。

<form action="submit.php" method="post">
  <input type="hidden" name="submitToken" value="<?php echo uniqid(); ?>">
  <input type="text" name="username">
  <input type="text" name="password">
  <input type="submit" value="登录">
</form>

然后，在 JavaScript 代码中，添加一个事件监听器，在表单提交时触发。在这个事件处理函数中，获取隐藏的 "submitToken" 字段的值，并将其发送到后端进行验证。

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();

  var submitToken = document.querySelector('input[name="submitToken"]').value;

  // 将 submitToken 发送到后端进行验证
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'submit.php');
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send('submitToken=' + submitToken);

  xhr.onload = function() {
    if (xhr.status === 200) {
      // 验证通过，提交表单
      e.target.submit();
    } else {
      // 验证失败，阻止提交
      alert('重复提交，请稍后再试');
    }
  };
});

在后端代码中，需要验证提交的 "submitToken" 是否与之前生成的令牌一致。如果一致，则允许提交表单；否则，阻止提交并返回错误信息。

<?php
// 获取提交的 submitToken
$submitToken = $_POST['submitToken'];

// 从数据库中获取之前生成的令牌
$storedToken = getStoredToken();

// 验证提交的 submitToken 是否与之前生成的令牌一致
if ($submitToken === $storedToken) {
  // 验证通过，允许提交表单
  // ...

} else {
  // 验证失败，阻止提交并返回错误信息
  http_response_code(400);
  echo '重复提交，请稍后再试';
}

通过这种方式，我们可以轻松实现前端防重复提交的功能，从而提高应用程序的稳定性和用户体验。