將內容類型更改為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

如果要返回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來填充你的演示文稿作為適當，並檢查noMore屬性使用data.noMore 。

Answer 2

我同意@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'來表示用於將每個結果保存在標記中的元素。