javascript - Ajax 执行所有操作，但附加 HTML

Question

基本的“滚动加载更多”AJAX 功能，控制台显示从请求发回的 HTML，但没有呈现任何内容。我一定忽略了一些非常简单的事情。

$(window).scroll(function()
{
   if($(window).scrollTop() == $(document).height() - $(window).height())
    {
        $('div#loadmoreajaxloader').show();
        $.ajax({
        url: "loader.php",
        success: function(html)
        {
            if(html)
            {
                $("#postswrapper").append(html);
                $('div#loadmoreajaxloader').hide();
            }else
            {
                $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
            }
        }
        });
    }
});

<div id="postswrapper">
	<div id="loadmoreajaxloader" style="color: #FFF;">
		<span class="loader"><span class="loader-inner"></span></span>
	</div>
</div>

滚动时，加载程序会根据请求隐藏，但不会从 loader.php 中带回任何 HTML。不过，加载 loader.php 本身会给出正确的 HTML，因此我确定问题出在 AJAX 上。

请求返回 HTML

<td>
  <div class="foliocontainer" style="background-image:url('./img/FOLIO/JDOUBLE - THE DROP 1.jpg');" name="counter1 row6"><ul class="overlaycontainer"><li><a href="./img/FOLIO/JDOUBLE - THE DROP 1.jpg" data-lightbox="JDOUBLE - "THE DROP"" data-title="JDouble - The Drop (2014)"><span class="textoverlay"><span>JDOUBLE - "THE DROP" <br /><center><span style="font-size: 18px;">2014</span></center></span></span></a></li></ul></div></td><td><div class="foliocontainer" style="background-image: url('./img/FOLIO/CEDEK - ACTION v8.jpg');" name="counter2 row5"><ul class="overlaycontainer"><li><a href="./img/FOLIO/CEDEK - ACTION v8.jpg" data-lightbox="CEDEK - "ACTION REMIX"" data-title="Cedek & Niko Javan - Action Remix (2015)"><span class="textoverlay"><span>CEDEK - "ACTION REMIX" <br /><center><span style="font-size: 18px;">2015</span></center></span></span></a></li></ul></div></td><td><div class="foliocontainer" style="background-image: url('./img/FOLIO/DEAUX APRIL 1 - UNION.jpg');" name="counter3 row4"><ul class="overlaycontainer"><li><a href="./img/FOLIO/DEAUX APRIL 1 - UNION.jpg" data-lightbox="EVENT FLYER" data-title="Event Flyer (2015)"><span class="textoverlay"><span>EVENT FLYER <br /><center><span style="font-size: 18px;">2015</span></center></span></span></a></li></ul></div></td><td width="20%"><div class="spacer20"></div></td></tr><tr><td width="20%"><div class="spacer20"></div></td><td><div class="foliocontainer" style="background-image: url('./img/FOLIO/LINZ PRAG - HIGH UP.jpg');" name="counter1 row3"><ul class="overlaycontainer"><li><a href="./img/FOLIO/LINZ PRAG - HIGH UP.jpg" data-lightbox="LINZ PRAG - "HIGH UP"" data-title="Linz Prag - High Up (2014)"><span class="textoverlay"><span>LINZ PRAG - "HIGH UP" <br /><center><span style="font-size: 18px;">2014</span></center></span></span></a></li></ul></div></td><td><div class="foliocontainer" style="background-image: url('./img/FOLIO/BAZAAR v5.jpg');" name="counter2 row2"><ul class="overlaycontainer"><li><a href="./img/FOLIO/BAZAAR v5.jpg" data-lightbox=""BAZAAR"" data-title="HPNTK & LEViTATE - Bazaar (2015)"><span class="textoverlay"><span>"BAZAAR" <br /><center><span style="font-size: 18px;">2015</span></center></span></span></a></li></ul></div></td><td><div class="foliocontainer" style="background-image: url('./img/FOLIO/ATLFOREVER4-V5.jpg');" name="counter3 row1"><ul class="overlaycontainer"><li><a href="./img/FOLIO/ATLFOREVER4-V5.jpg" data-lightbox=""ATLANTA FOREVER 4" CONCEPT ART " data-title="Atlanta Forever 4 Concept Art (2014)"><span class="textoverlay"><span>"ATLANTA FOREVER 4" CONCEPT ART  <br /><center><span style="font-size: 18px;">2014</span></center></span></span></a></li></ul></div></td><td width="20%"><div class="spacer20"></div></td></tr><tr><td width="20%"><div class="spacer20"></div></td>

Answer 1

返回的 HTML 错误。 $counter 在主页中用于指定何时应在表中创建新行。在外部调用 (loader.php) 中使用相同的变量将导致 $counter 成为不正确的值，尽管它作为独立的内容位于外部页面上。将外部页面变量更改为 $counter2 解决了该问题。