AJAX插入数据后浏览器刷新结果消失问题求助

嘿，我明白你遇到的问题了——AJAX提交后数据能正常显示，但刷新页面就没了，对吧？这是因为AJAX只是临时修改当前页面的DOM内容，并没有让服务器在页面加载时自动把数据渲染出来。当你刷新页面，浏览器会重新请求first.php，而这个文件里的#showdata本来就是空的，所以内容自然就消失了。

下面是具体的解决方案，我会结合你的代码一步步修改：

1. 修复核心问题：页面加载时自动获取数据 #

我们需要让页面一加载就从服务器拉取已有的数据，而不是只有提交表单后才显示。同时还要优化你的数据处理逻辑，避免SQL注入（你的旧代码用了废弃的mysql_query，而且直接拼接POST参数，非常危险）。

改造firstcall.php #

这个文件既要处理插入请求，也要返回所有已存的数据。我换成了更安全的mysqli扩展（mysql_*函数已经被废弃，不要再用了）：

<?php
session_start(); // 要开启session，放在文件最顶部

// 替换成你的数据库连接信息
$db_host = 'localhost';
$db_user = '你的数据库用户名';
$db_pass = '你的数据库密码';
$db_name = '你的数据库名';

// 建立数据库连接
$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if (!$conn) {
    die("数据库连接失败: " . mysqli_connect_error());
}

// 处理POST插入请求
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 安全处理用户输入，防止SQL注入
    $name1 = mysqli_real_escape_string($conn, trim($_POST['name1']));
    $age = mysqli_real_escape_string($conn, trim($_POST['age']));
    $chkArray = $_POST['namec'];

    // 把用户信息存入session（如果需要的话，其实这里可以不用session，直接用变量）
    $_SESSION['name1'] = $name1;
    $_SESSION['age'] = $age;

    // 循环插入选中的选项
    foreach ($chkArray as $selected) {
        $selected = mysqli_real_escape_string($conn, $selected);
        $insert_query = "INSERT INTO patient_details (p_name, p_age, g_number) VALUES ('$name1', '$age', '$selected')";
        mysqli_query($conn, $insert_query) or die("插入失败: " . mysqli_error($conn));
    }
}

// 查询所有已存的患者数据（可以改成只查最新的，根据需求调整）
$select_query = "SELECT * FROM patient_details ORDER BY id DESC";
$result = mysqli_query($conn, $select_query);
?>
<div class="panel panel-primary" id="showdata">
    <?php if (mysqli_num_rows($result) > 0): ?>
        <div class="panel-body">
            <ul class="list-unstyled">
                <?php while ($row = mysqli_fetch_assoc($result)): ?>
                    <li>
                        <strong>姓名:</strong> <?php echo htmlspecialchars($row['p_name']); ?> | 
                        <strong>年龄:</strong> <?php echo htmlspecialchars($row['p_age']); ?> | 
                        <strong>G编号:</strong> <?php echo htmlspecialchars($row['g_number']); ?>
                    </li>
                <?php endwhile; ?>
            </ul>
        </div>
    <?php else: ?>
        <div class="panel-body">
            <p>暂无数据，请提交表单添加。</p>
        </div>
    <?php endif; ?>
</div>
<?php
// 关闭数据库连接
mysqli_close($conn);
?>

改造AJAX代码 #

我们要新增一个loadData函数，在页面加载完成后自动调用，这样刷新页面时也会从服务器拉取数据：

<script type="text/javascript">
$(document).ready(function(){
    // 定义加载数据的函数
    function loadData() {
        $.ajax({
            url: 'firstcall.php',
            type: 'GET', // 用GET请求获取数据，POST留给插入操作
            success: function(data) {
                $("#showdata").html(data);
            }
        });
    }

    // 页面一加载就执行数据加载
    loadData();

    // 表单提交逻辑
    $("#submit").click(function(){
        var name1 = $("#name1").val().trim();
        var age = $("#age").val().trim();
        var chkArray = [];
        
        $('.checkbox1:checked').each(function() {
            chkArray.push($(this).val());
        });

        // 修正判断逻辑：至少选一个checkbox
        if(chkArray.length === 0){
            alert("请至少选择一个复选框！");
            return;
        }

        $.ajax({
            url: 'firstcall.php',
            type: 'POST',
            data: {name1: name1, age: age, namec: chkArray},
            success: function(data) {
                $("#showdata").html(data);
                // 提交成功后清空表单，提升用户体验
                $("#name1").val('');
                $("#age").val('');
                $('.checkbox1').prop('checked', false);
            }
        });
    });
});
</script>

2. 关键修改点说明 #

• 页面加载自动拉取数据：新增的loadData函数在$(document).ready()里执行，确保刷新页面时#showdata会被服务器返回的内容填充。
• SQL注入防护：用mysqli_real_escape_string处理用户输入，替换了废弃的mysql_*函数，如果你想更安全，可以用预处理语句（比如mysqli_prepare）。
• 修正复选框判断逻辑：原来的selected.length > 1会导致选一个复选框时无法提交，改成chkArray.length === 0更准确。
• 表单清空：提交成功后清空表单，用户体验更好。

3. 额外注意事项 #

• 确保first.php的顶部也加上session_start();（如果需要用session的话）。
• 数据库表patient_details的字段要和你的插入语句对应，比如p_name、p_age、g_number必须存在。

这样修改后，不管是提交表单还是刷新页面，#showdata区域都会显示最新的数据啦！

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