本文旨在解决PHP表单提交后，刷新页面时浏览器提示“确认重新提交表单”以及页面重复显示结果的问题。通过使用JavaScript防止表单重复提交，并结合PHP代码处理表单数据，确保用户体验的流畅性，避免不必要的重复操作。本文提供了一种无需重定向的解决方案，保持页面状态的同时避免重复提交。
在PHP开发中，经常会遇到表单提交后刷新页面导致重复提交的问题。这不仅会影响用户体验，还可能导致数据错误。下面我们将通过一个简单的示例，演示如何解决这个问题。
示例代码
<?php
$db_fruit = 'apple';
$db_vegetable = 'tomato';
$result = array();
if (isset($_POST['fruit']) && isset($_POST['vegetable'])) {
$fruit= htmlentities($_POST['fruit']);
$vegetable = htmlentities($_POST['vegetable']);
if (!empty($fruit) && !empty($vegetable)) {
if ($fruit == $db_fruit && $vegetable == $db_vegetable) {
$result[] = 'The values do match.';
} else {
$result[] = 'The values do not match.';
}
}
}
if (!empty($result)) {
foreach ($result as $val) {
echo "$val";
}
}
?>
<script>
//this part will not allow form resubmit on refresh !
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
</script>
<form action="" method="POST">
<input type="text" name="fruit" placeholder="FRUIT HERE"><br>
<input type="text" name="vegetable" placeholder="VEGETABLE HERE">
<button type="submit">CHECK</button>
</form>代码解释
立即学习“PHP免费学习笔记（深入）”；
-
PHP部分：
- $db_fruit 和 $db_vegetable 定义了数据库中存储的正确的水果和蔬菜的值。
- $result 数组用于存储需要显示的消息。
- isset($_POST['fruit']) && isset($_POST['vegetable']) 检查 fruit 和 vegetable 字段是否已通过 POST 方法提交。
- htmlentities() 函数用于转义 HTML 实体，防止 XSS 攻击。
- !empty($fruit) && !empty($vegetable) 确保提交的字段不为空。
- 根据用户输入与数据库值的比较结果，将相应的消息添加到 $result 数组中。
- 最后，遍历 $result 数组，将消息输出到页面。
-
JavaScript部分：
- 这段 JavaScript 代码使用 window.history.replaceState() 方法来修改浏览器的历史记录。
- window.history.replaceState( null, null, window.location.href ); 将当前 URL 替换为自身，这样在刷新页面时，浏览器不会重新提交表单。
-
HTML部分：
- zuojiankuohaophpcnform action="" method="POST"> 定义了一个表单，action 属性为空，表示提交到当前页面。
- <input type="text" name="fruit" placeholder="FRUIT HERE"> 和 <input type="text" name="vegetable" placeholder="VEGETABLE HERE"> 定义了两个文本输入框，分别用于输入水果和蔬菜。
- <button type="submit">CHECK</button> 定义了一个提交按钮。
工作原理
当用户填写表单并点击提交按钮后，PHP 代码会处理表单数据，并将结果显示在页面上。然后，JavaScript 代码会修改浏览器的历史记录，防止用户刷新页面时重复提交表单。
注意事项
- window.history.replaceState() 方法在某些旧版本的浏览器中可能不支持，建议进行兼容性测试。
- 该方法虽然可以防止重复提交，但不会清除 POST 数据。如果需要清除 POST 数据，可以使用重定向。
总结
通过结合 PHP 代码和 JavaScript 代码，我们可以有效地解决 PHP 表单提交后刷新页面导致重复提交的问题，提高用户体验。该方法简单易懂，易于实现，适用于各种 PHP 项目。
