将内容类型更改为 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' 来表示您用来在标记中保存每个结果的元素。

Answer 2

如果您要返回 JSON，那么您不能期望像以前那样简单地将 JSON 附加到 DOM。考虑您的成功处理程序：

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
  }

}

将成功处理程序的参数从html 更改为json 甚至更好的data, textStatus, jqXHR。还可以考虑使用 jQuery 的 getJSON() 方法作为简写。 http://api.jquery.com/jquery.getjson/

然后您可以使用data 来适当地填充您的演示文稿，并使用data.noMore 检查noMore 属性。