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 Framework，因此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条建议。

使用jQuery函数$(document).ready()代替window.onload属性。
使用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

JQuery post方法没有执行

1 个答案: