我正在尝试使用jQuery获取服务器上另一个页面的html内容并将其显示在当前页面上。使用alert()函数我可以看到需要写入的确切html,但是,当我尝试追加时,它会导致某种错误,并且当我加载页面时根本没有显示任何内容。我还尝试将html存储到变量中并使用document.write()将其添加到页面中,但发现该变量为空...将非常感谢任何帮助。
<script type="text/javascript">
var totalPages = $("#hidden_navinfo .totalpages").text();
var currentPage = $("#hidden_navinfo .startpage").text();
var next = "";
for ( var i = 1, len = totalPages; i < len; i++)
{
var count = i+1;
//$("#posts").load("/page/ .page");
$.get(("/page/" + count), function(data) {
var begin = data.indexOf("<!--BEGIN POST DATA-->")+22;
var end = data.indexOf("<!--END POST DATA-->");
next = data.substring(begin, end);
alert(next); //displays the correct html
$(".posts").append(next); //Causes nothing to be displayed
});
alert(next); //returns null
}
</script>
据我所知,这应该将存储在“next”中的文本添加到class =“posts”的div中。脚本直接放在这个div之后。
我做错了什么?
(正在提取的html可以在这里找到:http://www.trivialreviews.com/ext/sample.html) (可以在此处找到调用脚本的页面:http://fuckmodernity.tumblr.com/tagged/series1/)
答案 0 :(得分:1)
我能想到的第一件事是文档没有完全加载,$('.posts')
调用返回一个空对象。
尝试将文档包装在文档就绪处理程序中,例如
jQuery(function($) {
// your script
});
另外,我建议将新内容添加到由ID标识的单个元素中。您可能有多个class="posts"
元素会导致混淆。
$('#ajax-content-div').append(next);
另一个提示,你的JavaScript控制台(通常是Ctrl + Shift + J)比调度警报更好地进行调试
console.log(next);