如何在表单提交且页面重载时显示/隐藏HTML div？

嗨，我来给你讲讲怎么实现这个需求，其实用PHP结合HTML就能轻松搞定，分两种方案来处理，看你更倾向哪种：

一、基础方案：通过请求方法直接判断 #

咱们最直接的思路就是：表单提交用POST请求，而首次打开页面或非提交的刷新是GET请求，用PHP检测这个请求类型，就能决定该显示哪个div。

首先在页面最顶部加一段PHP代码，用来判断状态并处理表单数据：

<?php
// 标记是否是表单提交过来的状态
$isSubmitted = ($_SERVER['REQUEST_METHOD'] === 'POST');

// 如果是提交状态，这里就可以写你的数据库操作逻辑啦
if ($isSubmitted) {
    // 比如把表单数据插入数据库，示例逻辑：
    // 假设你已经有了数据库连接（比如PDO或mysqli）
    // $name = $_POST['name'];
    // $email = $_POST['email'];
    // $sql = "INSERT INTO your_table (name, email) VALUES (?, ?)";
    // $stmt = $pdo->prepare($sql);
    // $stmt->execute([$name, $email]);
}
?>

然后是HTML部分，用PHP的条件判断来控制div的显示：

<!DOCTYPE html>
<html>
<head>
    <title>表单提交示例</title>
</head>
<body>
    <!-- 首次加载/刷新时显示的提交前指令 -->
    <?php if (!$isSubmitted): ?>
    <div class="instructions">
        <h3>提交前要注意这些哦</h3>
        <p>1. 所有必填字段都要填完整哦</p>
        <p>2. 仔细检查填写的信息有没有错误</p>
        <p>3. 确认没问题后再点提交按钮</p>
    </div>
    <?php else: ?>
    <!-- 提交成功后显示的新内容 -->
    <div class="success-info">
        <h3>提交成功啦！</h3>
        <p>你的信息已经成功存入数据库，感谢你的配合~</p>
    </div>
    <?php endif; ?>

    <!-- 表单本身，注意method设为POST，action留空表示提交到当前页面 -->
    <form method="POST" action="">
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" required>
        
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" required>
        
        <button type="submit">提交</button>
    </form>
</body>
</html>

这个方案的原理很简单：用户第一次打开页面，浏览器发的是GET请求，$isSubmitted是false，就显示提交前的指令div；点击提交后，表单以POST请求提交到当前页面，$isSubmitted变成true，就切换显示提交成功的div，完全不会跳转到其他页面。

不过有个小问题：如果用户提交后刷新页面，浏览器会弹出“是否重新提交表单”的提示，要是你不想让用户看到这个提示，那可以试试下面的进阶方案。

二、进阶方案：用Session+PRG模式避免重复提交提示 #

PRG模式就是“提交-重定向-获取”的意思，简单说就是提交表单后，先处理数据，然后重定向回当前页面，把POST请求转成GET请求，同时用Session来记住提交状态，这样刷新页面就不会有重复提交的提示了。

先看PHP部分，要注意必须在输出任何HTML之前开启Session：

<?php
// 必须在输出任何HTML之前开启Session
session_start();

$isSubmitted = false;

// 如果是POST请求，处理表单数据
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 这里写你的数据库操作逻辑
    // 比如处理表单字段、插入数据库等
    // $name = $_POST['name'];
    // ... 数据库操作代码 ...
    
    // 把提交成功的状态存入Session
    $_SESSION['form_submitted'] = true;
    
    // 重定向到当前页面，这样浏览器就会发GET请求
    header("Location: " . $_SERVER['PHP_SELF']);
    exit; // 重定向后一定要退出，避免后续代码执行
}

// 检查Session里的状态，判断是否刚提交过
if (isset($_SESSION['form_submitted']) && $_SESSION['form_submitted']) {
    $isSubmitted = true;
    
    // 如果你希望用户再次刷新页面回到初始状态，就把Session里的标记清除
    // unset($_SESSION['form_submitted']);
    // 要是想一直保持提交成功的状态到用户关闭浏览器，就注释掉上面这行
}
?>

HTML部分和基础方案几乎一样，还是用$isSubmitted来判断显示哪个div：

<!DOCTYPE html>
<html>
<head>
    <title>表单提交示例</title>
</head>
<body>
    <?php if (!$isSubmitted): ?>
    <div class="instructions">
        <h3>提交前须知</h3>
        <p>1. 请填写所有必填字段</p>
        <p>2. 核对信息的准确性</p>
        <p>3. 确认后点击提交</p>
    </div>
    <?php else: ?>
    <div class="success-message">
        <h3>提交成功！</h3>
        <p>信息已成功保存，感谢你的操作。</p>
    </div>
    <?php endif; ?>

    <form method="POST" action="">
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" required>
        
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" required>
        
        <button type="submit">提交</button>
    </form>
</body>
</html>

这个方案解决了刷新提示重复提交的问题，用户体验会更友好，而且同样是在当前页面切换内容，不会跳转到其他网站。

内容来源于stack exchange