Question

我正在研究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   
  }
}
?>

见下面预览问题的图像

Answer 1

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

从$("#results").append(html);的顶部移除success: function(html) { .. }，然后将其移至else语句的if部分。这样做是为了让你不会无缘无故地追加空字符串或不需要的字符串，我们可以通过if/else逻辑更好地控制它。

您还需要从$('#loader_image').show()声明中删除else。即使ajax调用已成功处理，您也会重新显示它。

请参阅下面已清理的success功能。

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();
  }
});

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

1 个答案: