PHP添加数据库记录后，如何将执行结果显示在同一页面

Got it！要把表单提交的结果显示在当前页面导航栏下方，其实有两种实用的方案，我一步步给你讲清楚：

方案一：页面刷新后在当前页展示（最简单直接） #

这种方式不需要额外的JS，适合快速改造现有代码：

1. 修改表单属性 #

首先去掉表单的target="_blank"（这就是打开新页面的元凶），然后调整action属性：

• 如果你的数据库添加逻辑（原来的addKlant.php）和当前展示表单的页面是同一个文件，把action设为空或者action="<?php echo $_SERVER['PHP_SELF']; ?>"
• 如果逻辑是分开的，可以把addKlant.php的代码合并到当前页面，或者让addKlant.php处理完后跳回当前页面并携带结果参数

修改后的表单大概是这样：

<form name="registration" action="" method="post">
    <!-- 你的表单内容（输入框、提交按钮等） -->
</form>

2. 添加结果展示容器 #

在导航栏的下方，页面顶部位置加一个专门用来显示结果的容器：

<!-- 导航栏之后插入这个容器 -->
<div id="result-box" style="margin: 1rem 0; padding: 1rem; border-radius: 4px; display: none;">
</div>

3. 整合PHP处理逻辑 #

把原来addKlant.php里的数据库操作代码移到当前页面的顶部（或者保留在addKlant.php，但处理完后跳回当前页并传参），处理完后把结果存在变量里：

<?php
$resultMsg = '';
$msgType = ''; // 用来标记是成功还是错误信息

// 检查是否是POST提交
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 这里放你原来的数据库添加逻辑
    try {
        // 执行插入操作...比如用PDO预处理语句防止SQL注入
        $resultMsg = '客户记录添加成功！';
        $msgType = 'success';
    } catch (Exception $e) {
        $resultMsg = '添加失败：' . $e->getMessage();
        $msgType = 'error';
    }
}
?>

4. 渲染结果到页面 #

在页面里加入一段PHP+JS，把结果显示到之前的容器里：

<?php if (!empty($resultMsg)): ?>
<script>
    const resultBox = document.getElementById('result-box');
    // 设置内容和样式
    resultBox.textContent = "<?php echo htmlspecialchars($resultMsg); ?>";
    resultBox.style.display = 'block';
    resultBox.style.backgroundColor = "<?php echo $msgType === 'success' ? '#d4edda' : '#f8d7da'; ?>";
    resultBox.style.color = "<?php echo $msgType === 'success' ? '#155724' : '#721c24'; ?>";
</script>
<?php endif; ?>

方案二：无刷新异步展示（更流畅的用户体验） #

如果不想让页面刷新，就用AJAX来提交表单，这里用jQuery举例子（原生JS也可以，不过jQuery更简洁）：

1. 修改表单并添加容器 #

给表单加个ID，去掉target="_blank"，同时保留结果展示容器：

<!-- 导航栏下方的结果容器 -->
<div id="result-box" style="margin: 1rem 0; padding: 1rem; border-radius: 4px; display: none;">
</div>

<!-- 修改后的表单 -->
<form name="registration" id="klant-form" action="addKlant.php" method="post">
    <!-- 你的表单内容 -->
</form>

2. 编写AJAX提交代码 #

引入jQuery后，写一段JS拦截表单提交，异步发送请求：

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(function() {
    $('#klant-form').submit(function(e) {
        e.preventDefault(); // 阻止默认的表单跳转行为

        // 发送AJAX请求
        $.ajax({
            url: $(this).attr('action'),
            method: $(this).attr('method'),
            data: $(this).serialize(), // 序列化表单数据
            success: function(response) {
                // 解析服务器返回的JSON结果
                const res = JSON.parse(response);
                const resultBox = $('#result-box');
                
                resultBox.text(res.message);
                resultBox.show();
                
                // 根据状态设置样式
                if (res.status === 'success') {
                    resultBox.css({
                        backgroundColor: '#d4edda',
                        color: '#155724'
                    });
                    // 可选：清空表单内容
                    $('#klant-form')[0].reset();
                } else {
                    resultBox.css({
                        backgroundColor: '#f8d7da',
                        color: '#721c24'
                    });
                }
            },
            error: function() {
                $('#result-box').text('网络错误，请稍后重试').show().css({
                    backgroundColor: '#f8d7da',
                    color: '#721c24'
                });
            }
        });
    });
});
</script>

3. 修改addKlant.php返回JSON结果 #

让原来的处理脚本返回JSON格式的结果，方便JS解析：

<?php
header('Content-Type: application/json'); // 设置响应类型为JSON

try {
    // 执行数据库添加操作（记得用预处理语句防止SQL注入）
    echo json_encode([
        'status' => 'success',
        'message' => '客户记录添加成功！'
    ]);
} catch (Exception $e) {
    echo json_encode([
        'status' => 'error',
        'message' => '添加失败：' . $e->getMessage()
    ]);
}
?>

重要提醒 #

不管用哪种方案，都要注意：

• 对用户输入做严格的验证和过滤，比如用PHP的filter_var函数，数据库操作一定要用预处理语句（PDO或MySQLi），防止SQL注入
• 输出结果时用htmlspecialchars转义，防止XSS攻击

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