Ajax JQuery post方法未执行

我以前从未编写过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;   
  }
});
}

我已经知道getItems函数可以工作，因为我在页面第一次加载时也在使用它，而echoItems只是一个循环，用于回显每个项目的html，它在其他地方也可以工作。动作中的回声永远不会执行，所以我假设我的post通话有问题，以至于我永远都无法执行此动作。

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

---

你用萤火虫吗？如果没有，请不要这样做。它是Firefox的一个附加组件，可以让你快速查看帖子/回复以及更多的ajax请求，这样你就可以快速、轻松地看到正在发生的事情。此外，如果你使用Chrome或IE，F12按钮将打开内置控制台。好吧，从firebug中我发现，由于未定义用户，我遇到了一个致命错误。我已经解决了，但仍然没有发生任何事情。每次我向下滚动时，警报框会再次弹出，但不会加载新项目$grid.appendresponseText；应该将变量responseText中包含的任何html附加到id为“grid”的元素末尾，对吗？此外，在Firefox中，每当我向下滚动10个像素时，而不是向下滚动到底部10个像素以内时，警报框似乎会弹出。使用$document.ready时，警报将不再弹出，而在Firefox中，由于某种原因，它会扰乱页面布局。它似乎复制了我的页脚，它位于一个单独的文件中，每次Ajax启动时都由Zend_Layout插入。在firefox上，它从顶部而不是底部踢进10个像素。你有一个面向web的URL，我可以查看吗？你需要登录才能看到页面，由于应用程序尚未启动，我不能让任何人进入。你需要看什么？我检查了代码，但忘记了window.on事件。就在后面。很抱歉。我不知道它是怎么搞砸布局的。。。没有任何javascript控制台错误，是吗？

// 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