將ajax添加到無限滾動

Question

我只是通過創建以下函數創建了一種在網站上運行無限滾動的方法：

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

Answer 1

“結果”變量實際上是您從JSON的sql數據庫中獲得的響應（如注釋中所述）。 由於您沒有提供php腳本（以查看sql select語句），因此請輸入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   
      }

   }


 });

Answer 2

我相信，使您的代碼正常工作的最簡單方法是修改您的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的請求-這可能會淹沒服務器，因此，我建議將調用包裝在反跳函數中。 防反跳功能基本上可以讓您在給定的時間間隔內調用一次功能。 如果您不想編寫自己的去抖動功能，建議您使用下划線庫： 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
}