在网页开发中，表单提交是一个常见的操作，但有时用户可能会不小心多次点击提交按钮，导致表单被重复提交。这不仅会给服务器带来不必要的负担，还可能导致数据重复、操作错误等问题。为了避免这种情况，开发者通常会采取一些措施来防止表单的重复提交。本文将探讨几种常见的防止表单重复提交的方法。
1. 禁用提交按钮
最简单的方法是在用户点击提交按钮后，立即禁用该按钮。这样，即使用户多次点击，按钮也不会再次触发提交操作。这种方法适用于大多数简单的表单场景。
javascript
document.querySelector(‘form’).addEventListener(‘submit’, function() {
document.querySelector(‘input[type=”submit”]’).disabled = true;
});
2. 使用JavaScript阻止重复提交
除了禁用按钮，还可以通过JavaScript来阻止表单的重复提交。可以在表单提交时设置一个标志位，表示表单已经提交过，如果再次提交则直接返回。
javascript
let isSubmitted = false;
document.querySelector(‘form’).addEventListener(‘submit’, function(event) {
if (isSubmitted) {
event.preventDefault();
return;
}
isSubmitted = true;
});
3. 使用Token防止重复提交
另一种常见的方法是使用Token（令牌）来防止重复提交。服务器在生成表单时，会生成一个唯一的Token，并将其嵌入到表单中。当用户提交表单时，服务器会检查该Token是否已经被使用过。如果已经使用过，则拒绝处理该请求。
php
// 生成Token
$token = md5(uniqid(rand(), true));
$_SESSION[‘form_token’] = $token;
// 在表单中嵌入Token
echo ‘‘;
// 处理表单提交
if ($_POST[‘token’] !== $_SESSION[‘form_token’]) {
die(‘表单已提交，请勿重复提交’);
}
4. 使用重定向（Post/Redirect/Get模式）
Post/Redirect/Get（PRG）模式是一种常见的防止表单重复提交的技术。当用户提交表单后，服务器会处理表单数据，然后重定向到另一个页面。这样即使用户刷新页面，也不会再次提交表单。
php
// 处理表单提交
if ($_SERVER[‘REQUEST_METHOD’] === ‘POST’) {
// 处理表单数据
// …
// 重定向到另一个页面
header(‘Location: success.php’);
exit;
}
5. 使用AJAX提交表单
使用AJAX提交表单可以避免页面的刷新，从而减少用户重复提交的可能性。通过AJAX，可以在表单提交后显示一个提示信息，告知用户表单已成功提交。
javascript
document.querySelector(‘form’).addEventListener(‘submit’, function(event) {
event.preventDefault();
let formData = new FormData(this);
fetch(‘submit.php’, {
method: ‘POST’,
body: formData
}).then(response => response.json())
.then(data => {
alert(‘表单提交成功’);
});
});
6. 使用Session记录提交状态
在服务器端，可以通过Session来记录表单的提交状态。当用户提交表单时，服务器会检查Session中是否已经记录了该表单的提交状态。如果已经提交过，则拒绝处理。
php
session_start();
if ($_SERVER[‘REQUEST_METHOD’] === ‘POST’) {
if (isset($_SESSION[‘form_submitted’])) {
die(‘表单已提交，请勿重复提交’);
}
$_SESSION[‘form_submitted’] = true;
// 处理表单数据
// …
}
7. 使用数据库记录提交状态
对于需要持久化存储的场景，可以使用数据库来记录表单的提交状态。每次提交表单时，服务器会检查数据库中是否已经存在相同的记录。如果存在，则拒绝处理。
php
// 假设有一个数据库表来记录表单提交
$query = “SELECT FROM form_submissions WHERE user_id = :user_id AND form_id = :form_id”;
$stmt = $pdo->prepare($query);
$stmt->execute([‘user_id’ => $user_id, ‘form_id’ => $form_id]);
if ($stmt->rowCount() > 0) {
die(‘表单已提交，请勿重复提交’);
}
// 插入新的提交记录
$query = “INSERT INTO form_submissions (user_id, form_id) VALUES (:user_id, :form_id)”;
$stmt = $pdo->prepare($query);
$stmt->execute([‘user_id’ => $user_id, ‘form_id’ => $form_id]);
// 处理表单数据
// …
总结
防止表单重复提交是网页开发中的一个重要问题。通过禁用提交按钮、使用Token、PRG模式、AJAX提交、Session记录、数据库记录等方法，可以有效地避免表单的重复提交。开发者应根据具体的应用场景选择合适的方法，以确保表单提交的安全性和可靠性。