提交HTML表单后如何停留在当前页面，不跳转至PHP处理页面

我来给你两个实用的解决方案，帮你搞定提交表单后留在原页面并显示成功提示的问题～

方法一：PHP同页处理（最简单直接） #

这种方法把表单和PHP处理逻辑放在同一个文件里，提交后页面只会刷新但不会跳转到空白页，同时直接在原页面显示提示信息。

步骤1：调整表单的提交目标 #

把你原来表单的action="test.php"改成action="<?php echo $_SERVER['PHP_SELF']; ?>"，让表单提交到当前页面本身；或者直接把test.php里的数据库处理代码移到HTML页面的最顶部。

步骤2：在页面顶部加入PHP处理逻辑 #

在<html>标签之前插入以下PHP代码（把你原来test.php里的数据库操作代码替换进去就行）：

<?php
// 初始化提示信息变量
$tipMessage = '';

// 判断是否是表单POST提交
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 这里替换成你原来的数据库连接+插入逻辑
    $dbConn = mysqli_connect('localhost', '你的用户名', '你的密码', '数据库名');
    if (!$dbConn) {
        $tipMessage = "数据库连接失败：" . mysqli_connect_error();
    } else {
        // 示例：获取表单字段（根据你的实际字段修改）
        $username = mysqli_real_escape_string($dbConn, $_POST['username']);
        $email = mysqli_real_escape_string($dbConn, $_POST['email']);
        
        // 插入记录的SQL（用预处理语句更安全，这里先给基础示例）
        $insertSql = "INSERT INTO 你的表名 (username, email) VALUES ('$username', '$email')";
        
        if (mysqli_query($dbConn, $insertSql)) {
            $tipMessage = "记录添加成功！";
        } else {
            $tipMessage = "添加失败：" . mysqli_error($dbConn);
        }
        mysqli_close($dbConn);
    }
}
?>

步骤3：在页面中添加提示区域 #

在表单的上方或者合适位置加入提示展示代码，还可以加一点样式让提示更醒目：

<html>
<head>
    <style>
        .success-tip { color: #2ecc71; font-weight: bold; margin-bottom: 15px; }
        .error-tip { color: #e74c3c; font-weight: bold; margin-bottom: 15px; }
    </style>
</head>
<body>
    <!-- 展示提示信息 -->
    <?php if (!empty($tipMessage)): ?>
        <div class="<?php echo str_contains($tipMessage, '成功') ? 'success-tip' : 'error-tip'; ?>">
            <?php echo $tipMessage; ?>
        </div>
    <?php endif; ?>

    <!-- 你的表单 -->
    <form class="form" id="form1" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
        <!-- 你的表单字段示例 -->
        <input type="text" name="username" placeholder="请输入用户名">
        <input type="email" name="email" placeholder="请输入邮箱">
        <button type="submit">提交记录</button>
    </form>
</body>
</html>

这样提交表单后，页面会刷新但停留在原表单页，同时显示对应的成功/失败提示。

方法二：AJAX异步提交（无刷新体验更流畅） #

如果不想页面刷新，可以用JavaScript的AJAX来提交表单，完全不会跳转，直接在原页面显示提示，用户体验更好。

步骤1：调整表单结构 #

去掉表单的action属性（或者留空），并添加一个提示展示的容器：

<form class="form" id="form1" method="POST">
    <!-- 你的表单字段 -->
    <input type="text" name="username" placeholder="请输入用户名">
    <input type="email" name="email" placeholder="请输入邮箱">
    <button type="submit">提交记录</button>
</form>
<!-- 提示信息容器 -->
<div id="tip-container"></div>

步骤2：添加JavaScript提交逻辑（原生JS版本） #

在页面底部加入这段JS代码，阻止表单默认提交行为，用AJAX异步发送数据：

document.getElementById('form1').addEventListener('submit', function(e) {
    // 阻止表单默认跳转行为
    e.preventDefault();
    
    // 获取表单所有数据
    const formData = new FormData(this);
    const tipContainer = document.getElementById('tip-container');
    
    // 创建AJAX请求
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'test.php', true);
    
    // 请求成功后的处理
    xhr.onload = function() {
        if (xhr.status === 200) {
            tipContainer.textContent = xhr.responseText;
            // 根据返回内容设置样式
            tipContainer.className = xhr.responseText.includes('成功') ? 'success-tip' : 'error-tip';
            // 可选：提交成功后清空表单
            document.getElementById('form1').reset();
        } else {
            tipContainer.textContent = '提交失败，请重试';
            tipContainer.className = 'error-tip';
        }
    };
    
    // 请求出错的处理
    xhr.onerror = function() {
        tipContainer.textContent = '网络错误，请检查连接';
        tipContainer.className = 'error-tip';
    };
    
    // 发送请求
    xhr.send(formData);
});

步骤3：修改test.php的输出逻辑 #

把原来test.php里的代码改成直接输出提示文本，不要有跳转或其他多余输出：

<?php
$dbConn = mysqli_connect('localhost', '你的用户名', '你的密码', '数据库名');
if (!$dbConn) {
    echo "数据库连接失败：" . mysqli_connect_error();
    exit;
}

$username = mysqli_real_escape_string($dbConn, $_POST['username']);
$email = mysqli_real_escape_string($dbConn, $_POST['email']);

$insertSql = "INSERT INTO 你的表名 (username, email) VALUES ('$username', '$email')";

if (mysqli_query($dbConn, $insertSql)) {
    echo "记录添加成功！";
} else {
    echo "添加失败：" . mysqli_error($dbConn);
}

mysqli_close($dbConn);
?>

这样提交表单时，页面完全不会刷新，提示信息会直接显示在#tip-container里，体验非常流畅。

重要提醒 #

不管用哪种方法，都要对用户输入的数据进行安全处理，比如用mysqli_real_escape_string()或者更安全的预处理语句，防止SQL注入攻击哦～

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