调用Parse查询加载更多对象后更新对应div的PHP+AJAX实现问题

问题原因&修复方案 #

核心问题梳理 #

• AJAX逻辑冗余错误：调用getMyPosts.php后又执行$("#myPosts").load()拉取页面区块，该操作是GET请求不会携带newCount参数，相当于前面传的计数完全无效，重载后永远只显示初始21条内容。同时你当前的getMyPosts.php仅做查询逻辑，没有输出渲染后的HTML片段，AJAX请求拿到的返回值为空或报错，自然无法正常渲染。
• 变量未初始化：getMyPosts.php中未对$count做默认值处理，初始页面引入时无POST参数会触发PHP未定义变量警告，打断代码执行。另外需要确认$objId变量是否在getMyPosts.php中正常赋值，AJAX调用时如果该变量依赖上下文未正确获取，会导致查询条件失效。
• 分页逻辑错误：当前仅通过修改limit参数查询，会重复加载之前已经展示过的内容，正确分页需要结合skip()方法跳过已加载的条数。

具体修改步骤 #

1. 修改getMyPosts.php

补充变量初始化逻辑，新增AJAX请求判断，查询到结果后直接输出渲染好的HTML片段，同时优化重复的查询代码：

// 初始化变量避免未定义警告
$count = isset($_POST['newCount']) ? (int)$_POST['newCount'] : 0;
$isAjax = isset($_POST['ajax']) ? true : false;
// 请在此处补充$objId的赋值逻辑，确保无论是页面引入还是AJAX调用都能正常拿到用户ID
$objId = '你的用户ID获取逻辑';

$myPostsResults = [];
try {
    $myPostsQuery = new ParseQuery('posts');
    $myPostsQuery->equalTo("postOwnerId", $objId);
    $myPostsQuery->descending("createdAt");
    if ($count > 0) {
        // 加载更多时跳过已加载的条数
        $myPostsQuery->skip($count);
    }
    // 每次固定查21条即可，不需要动态修改limit
    $myPostsQuery->limit(21);
    $myPostsResults = $myPostsQuery->find();
} catch (ParseException $ex) {
    if($isAjax) echo $ex;
}

// AJAX请求直接输出HTML片段后结束运行
if($isAjax){
    foreach ($myPostsResults as $postResult) {
        $pic = $postResult->get("pic");
        $postObjId = $postResult->getObjectId();
?>
<div class="postHolder"><a href="post.php?postID=<?=$postObjId?>"><img src="images/transparent.png" style="background-image:url(<?=$pic->getURL()?>);" alt="post image"></a></div>
<?php
    }
    exit;
}

2. 修改AJAX请求逻辑

删除冗余的load方法，直接把返回的新内容追加到帖子列表末尾：

$('#loadMoreForm').on('submit', function (e) {
    e.preventDefault();
    const currentCount = parseInt($('#postsCountLoad').val());
    $.ajax({
        type: 'post',
        url: 'getMyPosts.php',
        // 手动传参比serialize更稳妥，避免表单字段名不匹配的问题
        data: {
            newCount: currentCount,
            ajax: 1
        },
        success: function (html) {
            // 追加新内容到列表末尾
            $("#myPosts").append(html);
            // 更新已加载计数
            $('#postsCountLoad').val(currentCount + 21);
            // 返回内容为空时说明没有更多帖子，禁用加载按钮
            if(html.trim() === ''){
                $(this).find('button').text('没有更多内容').prop('disabled', true);
            }
        }
    });
});

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