页面加载时通过jQuery Ajax POST传值为何返回空数据？

问题说明 #

页面加载初始化时，尝试通过Ajax POST传递hidden输入框的page_id值到show_comment.php，但页面最终显示"I'm empty"，无法获取到输入框的page_id值；但通过按钮触发相同的数据传递逻辑时，却能正常获取到page_id。

相关代码 #

HTML代码 #

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<head>

</head>

<body>
    <div id="all-comments"></div>
    <input type="hidden" name="page_id" value="1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            let page_id = $('input[name="page_id"]').val();
            $.ajax({
                url: 'vender/show_comment.php',
                type: 'POST',
                data: {
                    page_id: page_id
                }
            });
            setTimeout(function() {
                $("#all-comments").load("vender/show_comment.php")
            }, 1000);
        });
    </script>
</body>

show_comment.php代码 #

<?php

$page_id=$_POST['page_id'];
 if(empty($page_id))
 $str="I'm empty";
 else
 $str=$page_id; 
?>
<div class="new-comment">
    <p><?php echo $str?></p>
    <p><?php echo $str?></p>
</div>

问题原因 #

代码存在两个关键问题：

1. 第一个$.ajax请求确实通过POST发送了page_id，但该请求仅发送数据，未将返回内容插入页面，属于冗余操作；
2. 后续的$("#all-comments").load()方法默认是GET请求，未携带任何page_id参数，导致show_comment.php中$_POST['page_id']不存在，因此输出"I'm empty"。

按钮触发时能正常工作，是因为按钮逻辑直接调用了带参数的请求，而非像页面加载时拆分无用请求和无参数load。

解决方案 #

方案1：优化load请求，传递POST参数 #

直接修改setTimeout中的load方法，传递page_id参数，load会自动以POST方式发送数据：

$(document).ready(function() {
    let page_id = $('input[name="page_id"]').val();
    setTimeout(function() {
        $("#all-comments").load("vender/show_comment.php", {page_id: page_id});
    }, 1000);
});

方案2：完善PHP参数判断（可选） #

为避免PHP出现未定义索引警告，给$_POST['page_id']增加存在性判断：

<?php
$page_id = isset($_POST['page_id']) ? $_POST['page_id'] : '';
$str = empty($page_id) ? "I'm empty" : $page_id; 
?>
<div class="new-comment">
    <p><?php echo $str?></p>
    <p><?php echo $str?></p>
</div>

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