表单经send-mail.php处理后，在index.php显示提交状态消息的实现方法

安全阿岳

2026-5-15

嘿，这个需求其实仅用PHP就能实现，不过如果想要更流畅的用户体验，配合JavaScript（尤其是AJAX）会让交互感更好。我给你拆解两种可行的方案：

方案一：纯PHP实现（无需JS）

这种方案依赖页面跳转，通过Session传递提交状态，实现起来简单直接：

改造send-mail.php，用Session存储状态消息
因为跳转后POST数据会丢失，Session是传递临时消息的稳妥方式：

<?php
session_start(); // 先开启Session

if(isset($_POST['submit'])){
    // 获取表单数据（原有代码不变）
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];

    // 邮件配置（原有代码不变）
    $toEmail = 'user@example.com';
    $emailSubject = 'Contact Request Submitted by '.$name;
    $htmlContent = '<h2>Contact Request Submitted</h2> <h4>Name</h4><p>'.$name.'</p> <h4>Email</h4><p>'.$email.'</p> <h4>Message</h4><p>'.$message.'</p>';
    $headers = "MIME-Version: 1.0" . "\r\n";
    $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
    $headers .= 'From: '.$name.'<'.$email.'>'. "\r\n";

    // 发送邮件并存储状态到Session
    if(mail($toEmail,$emailSubject,$htmlContent,$headers)){
        $_SESSION['statusMsg'] = 'Your contact request has been submitted successfully !';
        $_SESSION['msgClass'] = 'alert-success';
    }else{
        $_SESSION['statusMsg'] = 'Your contact request submission failed, please try again.';
        $_SESSION['msgClass'] = 'alert-danger';
    }

    header('location: index.php#contact');
    exit; // 确保后续代码不执行
}
?>

修改index.php，读取Session并渲染提示框
在alert容器的位置，根据Session中的数据动态生成提示内容：

<section id="contact">
    <!-- 原有表单代码保持不变 -->
    <form action="send-mail.php" id="form" method="post" name="form">
        <input id="name" name="name" placeholder="your name" type="text" required>
        <input id="email" name="email" placeholder="your e-mail" type="email" required>
        <textarea cols="50" id="message" name="message" placeholder="your enquiry" rows="4" required></textarea>
        <input type="submit" name="submit" id="submit" value="Send Message">
    </form>

    <?php
    session_start();
    // 检查是否有状态消息
    if(isset($_SESSION['statusMsg'])){
        $msgClass = $_SESSION['msgClass'];
        $statusMsg = $_SESSION['statusMsg'];
        // 显示后清空Session，避免刷新页面重复显示
        unset($_SESSION['statusMsg']);
        unset($_SESSION['msgClass']);
    ?>
    <div class="alert alert-dismissible fade in <?php echo $msgClass; ?>" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <?php echo $statusMsg; ?>
    </div>
    <?php } else { ?>
    <!-- 没有消息时显示隐藏的默认容器 -->
    <div class="alert alert-dismissible fade in hide" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    </div>
    <?php } ?>
</section>

方案二：配合JavaScript（AJAX）实现无刷新提交

这种方案不需要页面跳转，用户体验更流畅，适合现代网站：

修改index.php，移除表单的action和method，添加JS监听提交事件：

<section id="contact">
    <form id="form" name="form"> <!-- 移除action和method -->
        <input id="name" name="name" placeholder="your name" type="text" required>
        <input id="email" name="email" placeholder="your e-mail" type="email" required>
        <textarea cols="50" id="message" name="message" placeholder="your enquiry" rows="4" required></textarea>
        <input type="submit" name="submit" id="submit" value="Send Message">
    </form>

    <div class="alert alert-dismissible fade in hide" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <span id="alert-message"></span> <!-- 用于动态插入消息 -->
    </div>
</section>

<script>
// 监听提交按钮点击事件
document.getElementById('submit').addEventListener('click', function(e){
    e.preventDefault(); // 阻止表单默认跳转行为

    const form = document.getElementById('form');
    const formData = new FormData(form);
    const alertContainer = document.querySelector('.alert');
    const alertMessage = document.getElementById('alert-message');

    // 用fetch发送AJAX请求
    fetch('send-mail.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        // 显示提示框并设置样式和内容
        alertContainer.classList.remove('hide');
        alertContainer.classList.add(data.msgClass);
        alertMessage.textContent = data.statusMsg;

        // 可选：3秒后自动隐藏提示框
        setTimeout(() => {
            alertContainer.classList.add('hide');
            alertContainer.classList.remove(data.msgClass);
        }, 3000);

        // 重置表单
        form.reset();
    })
    .catch(error => {
        // 请求失败时显示错误提示
        alertContainer.classList.remove('hide');
        alertContainer.classList.add('alert-danger');
        alertMessage.textContent = 'An error occurred, please try again.';
    });
});
</script>

改造send-mail.php，返回JSON格式的响应：

<?php
if(isset($_POST['submit'])){
    // 获取表单数据和邮件配置（原有代码不变）
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $toEmail = 'user@example.com';
    $emailSubject = 'Contact Request Submitted by '.$name;
    $htmlContent = '<h2>Contact Request Submitted</h2> <h4>Name</h4><p>'.$name.'</p> <h4>Email</h4><p>'.$email.'</p> <h4>Message</h4><p>'.$message.'</p>';
    $headers = "MIME-Version: 1.0" . "\r\n";
    $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
    $headers .= 'From: '.$name.'<'.$email.'>'. "\r\n";

    // 发送邮件并返回JSON响应
    if(mail($toEmail,$emailSubject,$htmlContent,$headers)){
        $response = [
            'statusMsg' => 'Your contact request has been submitted successfully !',
            'msgClass' => 'alert-success'
        ];
    }else{
        $response = [
            'statusMsg' => 'Your contact request submission failed, please try again.',
            'msgClass' => 'alert-danger'
        ];
    }

    header('Content-Type: application/json');
    echo json_encode($response);
    exit;
}
?>

内容的提问来源于stack exchange，提问作者user1896653