JQuery後處理方法不執行

Question

我從來沒有寫過Ajax，我目前正在嘗試編寫無限滾動頁面。當用戶向下滾動到頁面底部時，應該加載更多的項目，但現在它們沒有加載。這是我的Javascript功能來檢測時，他們見底並進行Ajax調用：

window.onload=function(){ 
//Find out how many items I have loaded and what filter I am using so I can make the Ajax call 
var vloaded = <?php echo $i; ?>; 
var vfilter = "<?php echo $filter ?>"; 
$(window).on('scroll', function() { 
    if ($(window).height() + $(window).scrollTop() >= $(document).height() - 10) { 
    //I have reached the bottom of the page, now load items 
    alert("loaded is " + vloaded + " and filter is " + vfilter); 
    $.post("/organizer/getMore", 
     { filter: vfilter, loaded: vloaded }, 
       function(responseText) { 
        $("grid").append(responseText); 
       },"html"); 
    //I've loaded the next 30 items, increment my counter for next time 
    vloaded +=30; 
    } 
}); 
} 

警報被顯示時，我打了底，我的變量是正確遞增。我使用Zend框架，所以該URL指向我getMoreAction()功能在這裏：

public function getmoreAction() 
{ 
//Used by Ajax to get more items for the infinite scroll 
    //Figure out how I'm filtering items and how many I've already loaded 
    $filter = $_POST['filter']; 
    $loaded = $_POST['loaded']; 
    echo "Filter is ".$filter; 
    echo "Loaded ".$loaded; 
    //Get all the items in the database ordered by filter 
    require_once(APPLICATION_PATH . '/models/ItemArray.php'); 
    $items = ItemArray::getItems($user->getID(), $filter, $loaded); 
    //Return items back to Ajax call, converted to html 
    echoItems($items); 
} 

我已經知道getItems功能的作品，因爲我還使用它時，第一次加載頁面，並echoItems只是一個循環來回顯每個項目的HTML，這也適用於其他地方。行動中的迴應永遠不會執行，所以我假設我的電話會議出現問題，以致我甚至從未接受過此操作。

Answer 1

2條建議。

1. 使用jQuery功能$(document).ready()而不是window.onload屬性。
2. 我重構，這樣我可以更容易地讀取它使用jQuery函數$.ajax()代替$.post()

。

// put these in the global scope 
var vloaded = <?php echo $i; ?>; 
var vfilter = "<?php echo $filter ?>"; 

$(document).ready() 
{ 

    // I forgot to leave this in 
    $(window).on('scroll', function() 
    { 
     var height = $(window).height(); 
     var scrollTop = $(window).scrollTop(); 
     var dHeight = $(document).height(); 

     if(height + scrollTop >= dHeight - 10) 
     { 
      alert("loaded is " + vloaded + " and filter is " + vfilter); 

      // an AJAX request instead of a POST request 
      $.ajax 
      (
      { 
       type: "POST", 
       url: "/organizer/getMore", 
       data: { filter: vfilter, loaded: vloaded }, 
       dataType: "html", 
       success: function(responseText, textStatus, XHR) 
       { 
       // select the element with the ID grid and insert the HTML 
       $("#grid").html(responseText); 
       } 
      } 
     ); 

      // global variable 
      vloaded +=30; 

     } // if 
    } 

); // on 

} // ready