如何在刷新页面时防止表单重新提交(F5 / CTRL+R)

基础概念

在Web开发中，当用户提交表单后，如果刷新页面（例如按下F5或CTRL+R），浏览器会重新发送上次提交的请求，这可能导致数据重复插入数据库或其他不期望的行为。这种现象称为“表单重复提交”。

类型与应用场景

1. 前端解决方案

禁用提交按钮：在表单提交后禁用提交按钮，防止用户再次点击。
重定向：提交成功后，重定向到一个新的页面，避免用户刷新当前页面。

2. 后端解决方案

Token机制：在表单中添加一个隐藏的Token字段，每次提交时生成一个新的Token，服务器验证Token的唯一性。
数据库唯一约束：在数据库中设置唯一约束，防止重复数据插入。

示例代码

前端解决方案（禁用提交按钮）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防止表单重复提交</title>
    <script>
        function onSubmit() {
            document.getElementById('submitBtn').disabled = true;
            return true;
        }
    </script>
</head>
<body>
    <form action="/submit" method="post" onsubmit="return onSubmit()">
        <input type="text" name="data">
        <button type="submit" id="submitBtn">提交</button>
    </form>
</body>
</html>

后端解决方案（Token机制）

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防止表单重复提交</title>
</head>
<body>
    <form action="/submit" method="post">
        <input type="hidden" name="csrfToken" value="{{ csrfToken }}">
        <input type="text" name="data">
        <button type="submit">提交</button>
    </form>
</body>
</html>

后端代码（Node.js + Express）：

const express = require('express');
const bodyParser = require('body-parser');
const crypto = require('crypto');
const app = express();

app.use(bodyParser.urlencoded({ extended: true }));

let csrfToken = crypto.randomBytes(16).toString('hex');

app.get('/', (req, res) => {
    res.send(`
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>防止表单重复提交</title>
        </head>
        <body>
            <form action="/submit" method="post">
                <input type="hidden" name="csrfToken" value="${csrfToken}">
                <input type="text" name="data">
                <button type="submit">提交</button>
            </form>
        </body>
        </html>
    `);
});

app.post('/submit', (req, res) => {
    const { csrfToken: token, data } = req.body;
    if (token !== csrfToken) {
        return res.status(403).send('Invalid token');
    }
    // 处理表单数据
    res.send('提交成功');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});