Question

我基本上试图在一个受欢迎的图书网站中懒惰加载div的内容到目前为止我所做的是：

使用simple_html_dom.php解析器抓取重新获取的内容并显示在php文件中
使用simpleXml创建用于存储已删除数据（标题，作者，img）的xml文件（也通过在html页面上显示来测试内容）

xml树生成

<?php
include_once('simple_html_dom.php');
$target_url = "http://www.amazon.in/gp/bestsellers/books/1318209031/ref=zg_bs_nav_b_2_1318203031";
$html = new simple_html_dom();
$html->load_file($target_url);

$xml = "<BOOKLIST>";
foreach($html->find('div[class=zg_itemWrapper]') as $post)
{
 $xml .= "<BOOK>";
 foreach($post->find('div[class=zg_itemImageImmersion] img') as $image)
 $xml .= "<IMAGE>".$image->src."</IMAGE>";
  foreach($post->find('div[class=zg_title] a') as $title)
  {
   $xml .= "<TITLE>".$title->href."</TITLE>";
   $xml .= "<TITLENAME>".$title->innertext."</TITLENAME>";
  }
 foreach($post->find('div[class=zg_byline]') as $author)
 $xml .= "<AUTHOR>".$author->plaintext."</AUTHOR>";

/*  I don't know why but the parser doesn't seem to generate 'price' tag
foreach($post->find('strong[class=price]') as $price)
 $xml .= "<price>".$price->text."</price>";
*/
 $xml .= "</BOOK>";
}
$xml .= "</BOOKLIST>";
$sxe = new SimpleXMLElement($xml);
$sxe->asXML("test.xml");
?>

使用simpleXml显示xml树内容的html文件如下：

<html>
<body>
<script>
 xmlhttp=new XMLHttpRequest();
 xmlhttp.open("GET","test.xml",true);
 xmlhttp.send();
 xmlDoc=xmlhttp.responseXML;

document.write("<div class='container' id='result'>");
var x=xmlDoc.getElementsByTagName("BOOK");
for (i=0;i<x.length;i++)
{
 document.write("<div class='span3' id='lazy'>");
 document.write("<div class='span2'>");
 document.write("<img src="+x[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue+"></img>");
 document.write("</div>");
 document.write("<div class='span2'>");
 document.write(x[i].getElementsByTagName("AUTHOR")[0].childNodes[0].nodeValue);
 document.write("</div>");
 document.write("<div class='span3' style='padding:0;margin-left:20px;height:auto'>");
 document.write("<a href="+x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue+">"+x[i].getElementsByTagName("TITLENAME")[0].childNodes[0].nodeValue+"</a>");
 document.write("</div>");
 document.write("</div>");
}
document.write("</div>");
</script>
</body>

<script>
function reloadq()
{
 var position = $("#lazy").offset().top;      
 var scllwidth = $(window).scrollTop() + $(window).height();
 if ( scllwidth > position)
 {
   alert( "Time to Load Content! Ajax request goes here" );
 }
}
$(window).scroll( function() { reloadq() } )
</script>
</html>

当我滚动此页面时，警报（在稍后放置ajax的jquery脚本中）起作用我需要帮助的部分是如何使用ajax从延迟加载来加载xml文件中的内容请建议解决方案，或者我出错的地方。谢谢:)）

Answer 1

首先，你为什么不使用Jquery的ajax函数？ http://api.jquery.com/jQuery.ajax/

无论如何，首先使用ajax响应数据进行警报（或使用浏览器开发人员工具/ firebug查看响应）。成功检索数据后，从x阵列中获取单个数据。一旦你有一个正确的循环数组，数据被检索担心在屏幕上输出它。

显然，为了帮助您进行测试，您可以在页面加载时使用ajax查询触发器，这样您就不必每次都滚动。

Ajax脚本将xml延迟加载到div中

1 个答案: