Javascript jQuery在滚动时加载更多数据而不是加载更多数据

我正在制作一个jQuery加载更多数据滚动条，当我点击分类链接时，它会根据我点击的分类对数据进行排序，这很好。它只加载前六个，如何解决此问题

index.php
<a href="index.php?where=category1">Category</a>

<div class="container"> 
        <div class="row" id="results"></div>    
        <div id="loader_image" align="center">
            <img src="loader.gif" alt="" width="50"> 
        </div>
        <div id="loader_message" align="center"></div>          
</div>


<script type="text/javascript">
    //For The Scroll
    var busy = false;
    var limit = 6
    var offset = 0;
    var where = '<?php if(isset($_GET["where"])) {echo $_GET['where'];} else {echo ' ';} ?>';

    function displayRecords(lim, off, where) {
        $.ajax({
          type: "GET",
          async: false,
          url: "<?php echo(link);?>getrecords.php",
          data: "limit=" + lim + "&offset=" + off + "&where=" + where,
          cache: false,
          beforeSend: function() {
            $("#loader_message").html("").hide();
            $('#loader_image').show();
          },
          success: function(html) {
            $("#results").append(html);
            $('#loader_image').hide();
            if (html == "") {
              $("#loader_message").html('<button class="btn btn-default" type="button">No more records.</button>').show()
            } else {
              // $("#loader_message").html('<button class="btn btn-default" type="button">Loading please wait...</button>').show();
              $('#loader_image').show();

            }
            window.busy = false;
          }
        });
    }

    $(document).ready(function() {
        // start to load the first set of data
        if (busy == false) {
          busy = true;
          // start to load the first set of data
          displayRecords(limit, offset, where);
        }


        $(window).scroll(function() {
          // make sure u give the container id of the data to be loaded in.
          if ($(window).scrollTop() + $(window).height() > $("#results").height() && !busy) {
            busy = true;
            offset = limit + offset;
            where = '<?php if(isset($_GET["where"])) {echo $_GET['where'];} else {echo ' ';} ?>';

            // this is optional just to delay the loading of data
            setTimeout(function() { displayRecords(limit, offset, where); }, 500);

            // you can remove the above code and can use directly this function
            // displayRecords(limit, offset);

          }
        });
      });
</script>




getrecords.php

$where = '';
    if(isset($_GET['where'])){
        $search = str_replace('-',' ', $_GET['where']);
        $where .= "WHERE category LIKE '%$search%'";
    }

$limit = (intval($_GET['limit']) != 0 ) ? $_GET['limit'] : 6;
$offset = (intval($_GET['offset']) != 0 ) ? $_GET['offset'] : 0;

$sql = "SELECT * FROM users {$where} ORDER BY id ASC LIMIT $limit OFFSET $offset";
try {
      $stmt = $user->runQuery($sql);
      $stmt->execute();
      $results = $stmt->fetchAll();
} catch (Exception $ex) {
    echo $ex->getMessage();
}
if (count($results) > 0) {
  foreach ($results as $res) {
?>

        <div class="col-sm-4 my-4 text-center">
              <div class="card">
                  <img class="rounded-circle img-fluid d-block mx-auto" src="http://placehold.it/200x200">
                  <h3><?php echo ucwords($res['name']); ?></h3>

                  <small><?php echo $res['category']; ?></small>
              </div>
        </div>

<?php   
  }
}
?>  

请参见下面的预览该问题的图像

---

如果加载图标从未移除，请检查控制台是否存在任何错误。您正在将加载图标设置为显示在beforeSend函数中，但ajax处理程序中没有错误属性

删除$results.appendhtml；从成功的顶部：functionhtml{..}并将其移动到if语句的else部分。您这样做是为了避免无缘无故地尝试附加空字符串或不需要的字符串，并且我们可以通过if/else逻辑更好地控制它

您还需要从else语句中删除$'loader\u image'.show。即使ajax调用已成功处理，您仍在显示它

请参阅下面的清理成功功能

success: function(html) {
  $('#loader_image').hide();
  if (html == "") {
    $("#loader_message").html('<button class="btn btn-default" type="button">No more records.</button>').show()
  } else {
    $("#results").append(html);    
  }
  window.busy = false;
}

新的ajax调用：

$.ajax({
  type: "GET",
  async: false,
  url: "<?php echo(link);?>getrecords.php",
  data: "limit=" + lim + "&offset=" + off + "&where=" + where,
  cache: false,
  beforeSend: function() {
    $("#loader_message").html("").hide();
    $('#loader_image').show();
  },
  success: function(html) {
    $('#loader_image').hide();
    if (html == "") {
      $("#loader_message").html('<button class="btn btn-default" type="button">No more records.</button>').show()
    } else {
       $('#results').append(html);
    }
    window.busy = false;
  },
  error: function(error) {
    console.log(error);
    $('#loader_image').hide();
    $('#loader_message').html('There was an error processing your request.').show();
  }
});

---

请将您的代码添加为代码，而不是代码的图片。我不认为有人想重新键入它来帮助你。我已经这样做了。快速提示，if busy==false可以缩短为if！另外，async:false是非常糟糕的。如果你不得不使用它，那么你就做错了。这不是默认值。ajax的默认行为是异步的。事实上，这就是ajax中第一个“a”的用途。如果async:false，则强制它是同步的，这与ajax的观点相反。它还将导致UI冻结，直到请求返回。我唯一一次使用该属性是在卸载之前执行一次，我是为了防止浏览器过早离开页面。