You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

PHP联系表单提交后白屏,如何实现页面刷新或跳转?

嘿,我看到你的联系表单能成功发邮件,但提交后就白屏的问题了——这是因为你的PHP脚本在处理完邮件发送后,没有输出任何内容或者执行跳转操作,浏览器收到空响应自然就显示白屏啦。咱们来一步步解决这个问题,给你几个实用的方案:

方案1:提交后刷新当前页面并显示成功提示

这个方案适合想让用户停留在当前页面,同时看到提交成功的反馈。核心思路是用会话存储提示信息,然后跳转回当前页面显示:

<?php
session_start(); // 开启会话用来存提示信息
$name_error = $email_error = "";
$name = $email = $message = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // 你的表单验证逻辑(比如检查姓名、邮箱格式)
    if (empty($_POST["name"])) {
        $name_error = "请输入姓名";
    } else {
        $name = test_input($_POST["name"]);
    }

    if (empty($_POST["email"]) || !filter_var($_POST["email"], FILTER_VALIDATE_EMAIL)) {
        $email_error = "请输入有效的邮箱";
    } else {
        $email = test_input($_POST["email"]);
    }

    $message = test_input($_POST["message"]);

    // 验证通过后发送邮件
    if (empty($name_error) && empty($email_error)) {
        $to = "你的邮箱@example.com";
        $subject = "联系表单消息:{$name}";
        $body = "姓名:{$name}\n邮箱:{$email}\n消息:{$message}";
        $headers = "From: {$email}";

        if (mail($to, $subject, $body, $headers)) {
            // 存储成功提示,跳转回当前页面
            $_SESSION['success'] = "消息发送成功!我们会尽快回复你";
            header("Location: " . $_SERVER['PHP_SELF']);
            exit; // 必须exit,防止后续代码执行
        } else {
            $_SESSION['error'] = "发送失败,请稍后重试";
            header("Location: " . $_SERVER['PHP_SELF']);
            exit;
        }
    }
}

// 清理用户输入的辅助函数
function test_input($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
}
?>

<!-- 你的HTML表单部分 -->
<!DOCTYPE html>
<html>
<head>
    <title>联系我们</title>
</head>
<body>
    <!-- 显示成功/错误提示 -->
    <?php if(isset($_SESSION['success'])): ?>
        <div style="color: green; padding: 10px; border: 1px solid green;">
            <?php echo $_SESSION['success']; unset($_SESSION['success']); ?>
        </div>
    <?php endif; ?>
    <?php if(isset($_SESSION['error'])): ?>
        <div style="color: red; padding: 10px; border: 1px solid red;">
            <?php echo $_SESSION['error']; unset($_SESSION['error']); ?>
        </div>
    <?php endif; ?>

    <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
        姓名: <input type="text" name="name">
        <span class="error"><?php echo $name_error;?></span><br>

        邮箱: <input type="text" name="email">
        <span class="error"><?php echo $email_error;?></span><br>

        消息: <textarea name="message" rows="5" cols="40"></textarea><br>

        <input type="submit" value="提交">
    </form>
</body>
</html>
方案2:跳转到专门的成功页面

如果想引导用户到一个独立的感谢页面,这个方案更简单直接:

修改PHP中邮件发送成功后的逻辑:

if (mail($to, $subject, $body, $headers)) {
    // 跳转到成功页面
    header("Location: thank-you.php");
    exit;
} else {
    // 跳回表单页面并带错误标记
    header("Location: contact.php?send_error=1");
    exit;
}

然后创建thank-you.php页面:

<!DOCTYPE html>
<html>
<head>
    <title>提交成功</title>
</head>
<body>
    <h1>感谢你的消息!</h1>
    <p>我们会在24小时内回复你,<a href="contact.php">点击返回联系页面</a></p>
</body>
</html>
方案3:无刷新异步提交(AJAX)

如果不想让页面刷新,可以用JS的AJAX来处理提交,在当前页面显示反馈:

HTML表单部分:

<form id="contactForm">
    姓名: <input type="text" name="name">
    <span class="error" id="nameError"></span><br>

    邮箱: <input type="text" name="email">
    <span class="error" id="emailError"></span><br>

    消息: <textarea name="message" rows="5" cols="40"></textarea><br>

    <input type="submit" value="提交">
    <div id="feedback"></div>
</form>

添加JavaScript代码:

document.getElementById('contactForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止表单默认跳转

    const formData = new FormData(this);
    const feedback = document.getElementById('feedback');
    const errors = document.querySelectorAll('.error');

    // 清空之前的提示
    errors.forEach(el => el.textContent = '');
    feedback.textContent = '';

    // 发送AJAX请求
    fetch('contact.php', {
        method: 'POST',
        body: formData
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            feedback.textContent = data.msg;
            feedback.style.color = 'green';
            this.reset(); // 清空表单
        } else {
            if (data.nameErr) document.getElementById('nameError').textContent = data.nameErr;
            if (data.emailErr) document.getElementById('emailError').textContent = data.emailErr;
            feedback.textContent = '提交失败,请检查表单';
            feedback.style.color = 'red';
        }
    })
    .catch(() => {
        feedback.textContent = '网络错误,请稍后重试';
        feedback.style.color = 'red';
    });
});

修改PHP返回JSON响应:

<?php
header('Content-Type: application/json');
$response = ['success' => false, 'msg' => '', 'nameErr' => '', 'emailErr' => ''];

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = test_input($_POST["name"]);
    $email = test_input($_POST["email"]);
    $message = test_input($_POST["message"]);

    // 验证逻辑
    if (empty($name)) $response['nameErr'] = '请输入姓名';
    if (empty($email) || !filter_var($email, FILTER_VALIDATE_EMAIL)) $response['emailErr'] = '请输入有效邮箱';

    if (empty($response['nameErr']) && empty($response['emailErr'])) {
        $to = "你的邮箱@example.com";
        $subject = "联系表单消息:{$name}";
        $body = "姓名:{$name}\n邮箱:{$email}\n消息:{$message}";
        $headers = "From: {$email}";

        if (mail($to, $subject, $body, $headers)) {
            $response['success'] = true;
            $response['msg'] = '消息发送成功!';
        } else {
            $response['msg'] = '发送失败,请稍后重试';
        }
    }
}

echo json_encode($response);

function test_input($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
}
?>

注意事项

  • 使用header()跳转时,必须确保在调用前没有任何输出(包括PHP标签外的空格、HTML代码),如果有输出可以在PHP开头加ob_start()开启输出缓冲。
  • 服务器需要支持mail()函数,如果发送邮件有问题,可以检查服务器的邮件配置。
  • 用会话变量时,要在所有使用会话的页面开头调用session_start()

内容的提问来源于stack exchange,提问作者Andrew White

火山引擎 最新活动