将ajax添加到无限滚动答案

【问题标题】：Adding ajax to infinite scroll将ajax添加到无限滚动
【发布时间】：2015-07-28 22:11:07
【问题描述】：

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

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>

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

我想使用 ajax 从 mysql 添加信息，但在这样做时遇到了麻烦。我正在使用以下 Ajax 与我的数据库进行交互：

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

我的问题是，我不明白如何相互调用函数和 Ajax 以使其正常工作。我尝试将 Ajax 放入函数中，但这似乎没有任何作用。当需要创建新的 div 时，如何同时调用我创建的函数和 Ajax？

我的 PHP 是：

$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);

【问题讨论】：

你能创建一个 JSFiddle 吗？像这样jsfiddle.net/pgmreddy/oxp3506t 这样有人可以清楚地了解问题所在？

标签： javascript jquery html ajax

【解决方案1】：

我相信让您的代码工作的最简单方法是像这样修改您的 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 函数基本上可以让您在给定的时间间隔内调用一次函数。如果您不想编写自己的去抖动函数，我建议使用下划线库：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
}

【讨论】：

这可以让我在滚动时获得新的 div！但是可以说我正在从我的 php 文件中获取一个包含数据的数组。我怎样才能将这些传递到 div 中？
我这里做了一个简单的例子sn-p：jsfiddle.net/ccseLmsa如果需要更多帮助请回复！
嘿，我在问题中添加了我的 PHP。当我尝试检索我的数组时，仍然没有任何结果。有什么建议吗？

【解决方案2】：

“结果”变量实际上是来自 sql 数据库的响应，它是 JSON（如 cmets 中所述）。既然你没有给出你的 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   
      }

   }


 });

【讨论】：