当前位置：首页 > 文章列表 > 文章 > 前端 > 表单防重复提交方法详解：JS与Token双重防护

表单防重复提交方法详解：JS与Token双重防护

2026-01-11 15:44:56 0浏览收藏

有志者，事竟成！如果你在学习文章，那么本文《HTML表单防重复提交的实现方法主要有以下几种：一、使用 JavaScript 阻止重复点击通过 JavaScript 禁用提交按钮，防止用户多次点击。

优点：简单有效，适合前端控制。缺点：用户可通过禁用 JS 或刷新页面绕过。二、使用唯一提交令牌（Token）在服务器端生成一个唯一 Token，并将其作为隐藏字段发送到客户端。每次提交时验证该 Token，确保只处理一次请求。实现步骤：生成 Token（服务端）：// PHP 示例 session_start(); $_SESSION['token'] = md5(uniqid(rand(), true));将 Token 添加到表单中：验证 Token（服务端）： // submit.php session_start(); if ($_SERVER['REQUEST_METHOD']》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

防止表单重复提交的核心方法是令牌机制，通过服务器生成唯一令牌并存储在会话中，表单提交时验证并删除令牌，确保每次提交唯一有效。

HTML表单如何实现防重复提交？怎样生成唯一的提交令牌？

防止HTML表单重复提交，核心在于确保每次提交都是唯一且有效的。通常通过令牌机制、禁用提交按钮、或者在服务器端进行校验来实现。

解决方案：

令牌机制 (Token-Based Approach)

这是最常见且可靠的方法。它的原理是为每个表单生成一个唯一的令牌，并在服务器端验证该令牌。

生成令牌：

在服务器端，使用一个随机数生成器（例如，uuid库在Python中，或者java.util.UUID在Java中）生成一个唯一的字符串。将此令牌存储在用户的会话中。

import uuid
from flask import session

def generate_token():
    token = str(uuid.uuid4())
    session['csrf_token'] = token
    return token

import java.util.UUID;
import javax.servlet.http.HttpSession;

public String generateToken(HttpSession session) {
    String token = UUID.randomUUID().toString();
    session.setAttribute("csrf_token", token);
    return token;
}

将令牌添加到表单：

将生成的令牌作为一个隐藏字段添加到HTML表单中。

<form method="post" action="/submit">
    &lt;input type=&quot;hidden&quot; name=&quot;csrf_token&quot; value=&quot;{{ csrf_token }}&quot;&gt;
    <!-- 其他表单字段 -->
    <button type="submit">提交</button>
</form>

验证令牌：

当表单提交到服务器时，从请求中获取令牌，并与存储在会话中的令牌进行比较。如果匹配，则处理表单数据，并从会话中删除该令牌。如果不匹配，则拒绝请求。

from flask import request, session, redirect, url_for

@app.route('/submit', methods=['POST'])
def submit():
    token = request.form.get('csrf_token')
    if not token or token != session.get('csrf_token'):
        return "Invalid CSRF token", 400

    session.pop('csrf_token', None)  # 删除令牌，防止重复提交

    # 处理表单数据
    return "Form submitted successfully!"

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

public boolean validateToken(HttpServletRequest request) {
    HttpSession session = request.getSession();
    String token = request.getParameter("csrf_token");
    String sessionToken = (String) session.getAttribute("csrf_token");

    if (token != null && token.equals(sessionToken)) {
        session.removeAttribute("csrf_token"); // 删除令牌
        return true;
    }
    return false;
}

禁用提交按钮 (Disable Submit Button)

这是一种简单的客户端方法，虽然不如令牌机制可靠，但在某些情况下也很有用。

禁用按钮：

当用户点击提交按钮时，立即禁用该按钮。

const submitButton = document.getElementById('submitButton');

submitButton.addEventListener('click', function() {
    this.disabled = true;
    this.form.submit(); // 确保表单提交
});

<button type="submit" id="submitButton">提交</button>

防止JavaScript失效：
为了防止JavaScript失效导致按钮无法禁用，可以在服务器端验证表单是否已经处理过。

服务器端校验 (Server-Side Validation)

在服务器端，记录已处理的表单提交。可以使用数据库或缓存来存储已处理的表单的唯一标识符（例如，基于用户ID和时间戳的组合）。当收到新的提交时，检查其标识符是否已存在。

如何处理AJAX表单的重复提交？

对于AJAX表单，令牌机制仍然适用，但需要在AJAX请求中包含令牌。

获取令牌：

从HTML表单中获取令牌。

const csrfToken = document.querySelector('input[name="csrf_token"]').value;

添加到请求头或数据：

将令牌添加到AJAX请求的头部或数据中。

fetch('/submit', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-CSRF-Token': csrfToken  // 添加到请求头
    },
    body: JSON.stringify({
        // 表单数据
        'data': 'some data'
    })
})
.then(response => {
    // 处理响应
});

或者，将令牌添加到请求数据中：

fetch('/submit', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        // 表单数据
        'data': 'some data',
        'csrf_token': csrfToken  // 添加到请求数据
    })
})
.then(response => {
    // 处理响应
});

服务器端验证：
服务器端验证令牌的方式与普通表单相同。

令牌的存储位置：Session还是Cookie？

通常建议将令牌存储在Session中，因为Session是服务器端的存储，安全性更高。如果必须使用Cookie，请确保Cookie设置了HttpOnly和Secure标志，以防止XSS攻击和中间人攻击。

如何处理用户在多个标签页打开同一个表单的情况？

当用户在多个标签页打开同一个表单时，每个标签页都会生成一个独立的令牌。服务器端需要能够处理这种情况，例如，允许用户在多个标签页中提交表单，或者在提交一个标签页的表单后，使其他标签页的表单失效。一种简单的方法是，在用户提交任何一个标签页的表单后，刷新所有其他打开相同表单的标签页，强制用户重新加载表单并获取新的令牌。

禁用提交按钮后如何恢复？

如果在禁用提交按钮后，表单提交失败或需要重新提交，需要重新启用该按钮。可以在服务器端返回一个指示成功的标志，然后在客户端根据该标志重新启用按钮。

fetch('/submit', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-CSRF-Token': csrfToken
    },
    body: JSON.stringify({
        'data': 'some data'
    })
})
.then(response => response.json())
.then(data => {
    if (data.success) {
        // 处理成功
    } else {
        submitButton.disabled = false; // 重新启用按钮
        // 处理失败
    }
});

今天关于《表单防重复提交方法详解：JS与Token双重防护》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于防重复提交,提交令牌的内容请关注golang学习网公众号！

防重复提交提交令牌