javascript - 将内容类型更改为 JSON 时，从数据库加载更多内容不起作用

Question

一旦没有更多结果可显示，我就会尝试停止显示“加载更多”按钮。

所以，我的计划是，一旦单击“加载更多”按钮并且在数据库上运行查询，我将进行行计数，然后如果该数字小于 LIMIT 子句中请求的数字，那么我将返回该信息.

所以目前我的 js 脚本如下所示:

$(document).ready(function(){
    var pageIndex = 1;
    $('#loadmorebuilds-div').click(function() {
        $('#buildcontainer').imagesLoaded( function(){
        $.ajax({
           url: 'includes/loadmorebuilds.php?type=follow&pageIndex=' + pageIndex,
           success: function(html) {
              var el = jQuery(html);
              jQuery("#buildcontainer").append(el).masonry( 'reload' );
              $("#loadmorebuilds-div").stop();
              pageIndex++;
              $("#buildcontainer").masonry()
           }

        });

    });

});
});

这工作正常，但我想在我的 loadmorebuilds.php 页面中放置一个 JSON 返回。

所以计划是这样做:

// check if the results count is less than requested
if ($checkforlast < 8) {
    $return['noMore'] = true;
    echo json_encode($return);
}

然后我会将我的 js 更改为如下所示:

$(document).ready(function(){
    var pageIndex = 1;
    $('#loadmorebuilds-div').click(function() {
        $('#buildcontainer').imagesLoaded( function(){
        $.ajax({
           url: 'includes/loadmorebuilds.php?type=follow&pageIndex=' + pageIndex,
           success: function(html) {
              var el = jQuery(html);
              jQuery("#buildcontainer").append(el).masonry( 'reload' );
              $("#loadmorebuilds-div").stop().fadeOut();
              pageIndex++;
              $("#buildcontainer").masonry()

              if (response.correctKey === true) {
                DO SOMETHING TO REMOVE BUTTON
              }

           }

        });

    });

});
});

当我更改内容类型时，问题就出现了:

header('Content-Type: application/json');

因为这改变了我发回的数据的方式(我认为？)。更改内容类型将导致不显示新内容，并且单击“加载更多”按钮时不会发生任何情况。

如果结果少于请求且不更改内容类型，是否有另一种方法将数据发送回 ajax 调用？

希望这是有道理的!

Answer 1

我同意@palpatim 的观点，即字符串解析可能不是最好的方法。但这个解决方案也可以工作，并且不需要您在客户端上从 json 构建 html:

$(document).ready(function(){
  var pageIndex = 1;
  $('#loadmorebuilds-div').click(function() {
    $('#buildcontainer').imagesLoaded( function(){
      $.ajax({
        url: 'includes/loadmorebuilds.php?type=follow&pageIndex=' + pageIndex,
        success: function(html) {
          var el = jQuery(html),
              rowCount = el.find('tr').length;

          jQuery("#buildcontainer").append(el).masonry( 'reload' );
          $("#loadmorebuilds-div").stop().fadeOut();
          pageIndex++;
          $("#buildcontainer").masonry();

          if (rowCount < 8) {
            DO SOMETHING TO REMOVE BUTTON
          }
       }
    });
});
});

我在这里使用“tr”来表示您用来保存标记中每个结果的元素。