为无限滚动添加ajax

Adding ajax to infinite scroll

本文关键字：ajax 添加 滚动 无限      更新时间：2023-09-26

我刚刚创建了一个方法，通过创建以下函数在我的网站上运行无限滚动:

window.onscroll = yHandler;
function yHandler(){
var wrap = document.getElementById('wrap');
var contentHeight = wrap.offsetHeight;
var yOffset = window.pageYOffset; 
var y = yOffset + window.innerHeight;
 if(y >= contentHeight){
   wrap.innerHTML += '<div class="newData"></div>';
 }
}

它在用户向下滚动页面时创建了一个简单的div。我在html中调用它:

<div id="wrap">
        <img src="NYC.jpg">
</div>

我的页面上只有一张较大的图片，它占用了测试的空间。

我想添加信息从mysql使用ajax，但我有麻烦这样做。我使用以下Ajax与数据库交互:

$.ajax({
      url: "scroll.php",
      data: "";
      dataType: 'json',
      success: function(result){
        //get the variables here.
      }
  });

我的问题是，我不明白如何调用函数和Ajax彼此使其全部工作。我尝试将Ajax放入函数中，但似乎没有做任何事情。当需要创建一个新的div时，我如何同时调用我创建的函数和Ajax ?

My PHP is:

$return_arr = array();
$fetch = mysqli_query("SELECT User_Id, First_Name, Last_Name FROM Users"); 
while ($row = mysqli_fetch_array($fetch, MYSQLI_ASSOC)) {
    $row_array['User_Id'] = $row['User_Id'];
    $row_array['First_Name'] = $row['First_Name'];
    $row_array['Last_Name'] = $row['Last_Name'];
    array_push($return_arr,$row_array);
}
echo json_encode($return_arr);

我认为使代码工作的最简单方法是像这样修改if语句:

if(y >= contentHeight){
  $.ajax('scroll.php').done(function(data) {
    // variables: data['variable_name']
    // or if returning HTML:
    wrap.innerHTML += '<div class="newData">' + data + '</div>';
  })
}

但是，考虑到一旦滚动到站点的内容之外，就会为每个滚动事件向scroll.php发送请求——这可能会淹没服务器，因此我建议将调用包装在debounce函数中。debounce函数基本上允许您在给定的时间间隔内调用一个函数一次。如果您不想编写自己的debounce函数，我建议使用下划线库:http://underscorejs.org。代码看起来像这样:

if(y >= contentHeight){
  _.debounce(
    $.ajax('scroll.php').done(function(data) {
      wrap.innerHTML += '<div class="newData">' + data + '</div>';
    }
  ), 1000) // Only fetch once every second
}

"结果"变量实际上是您从sql数据库的响应，这是JSON(如评论中所述)。因为你没有给你的php脚本(看到你的sql选择语句)，然后把你的sql column_name(属性)而不是"your_sql_column_name"。

var array = [];
   $.ajax({
   type: "GET",
   url: "scrol.php",
   dataType: "json",
   success: function (result) // response is already JSON, dont' need to parse
   {
       alert(result[0].your_sql_column_name); // testing purpose 
        for (var i = 0; i < num_of_elements; i++) {
       array.push(result[i].your_sql_column_name); //storing values inside an array   
      }
   }

 });
相关文章：