PHP表单提交后刷新页面避免重复提交及结果显示

本文旨在解决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免费学习笔记（深入）”；

1. PHP部分：

   • $db_fruit 和 $db_vegetable 定义了数据库中存储的正确的水果和蔬菜的值。
   • $result 数组用于存储需要显示的消息。
   • isset($_POST['fruit']) && isset($_POST['vegetable']) 检查 fruit 和 vegetable 字段是否已通过 POST 方法提交。
   • htmlentities() 函数用于转义 HTML 实体，防止 XSS 攻击。
   • !empty($fruit) && !empty($vegetable) 确保提交的字段不为空。
   • 根据用户输入与数据库值的比较结果，将相应的消息添加到 $result 数组中。
   • 最后，遍历 $result 数组，将消息输出到页面。

2. JavaScript部分：

   

   降重鸟

   要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

   113

   查看详情
   • 这段 JavaScript 代码使用 window.history.replaceState() 方法来修改浏览器的历史记录。
   • window.history.replaceState( null, null, window.location.href ); 将当前 URL 替换为自身，这样在刷新页面时，浏览器不会重新提交表单。

3. 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 项目。

以上就是PHP表单提交后刷新页面避免重复提交及结果显示的详细内容，更多请关注php中文网其它相关文章！