加载更多JS原理

最新推荐文章于 2022-01-14 23:49:47 发布

Yulia007

最新推荐文章于 2022-01-14 23:49:47 发布

阅读量546

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Yulia007/article/details/53426690

本文介绍了一种通过Ajax技术实现在网页上动态加载更多内容的方法。当用户点击“查看更多”按钮时，系统将异步获取并显示额外的内容，同时确保用户体验流畅。此外，还提供了处理最后一页逻辑的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="news">
<ul class="news-list">
<li>内容</li>
</ul>
</div>
{if $pages}
<div class="load-more"><a>查看更多</a></div>
{/if}
<div class="newspages" id="newspages" style="display:none">
<a href="/news/">1</a>
<a href="/news/2.html">2</a>
<a href="/news/3.html">3</a>
<a href="/news/4.html">4</a>
<a href="/news/5.html">5</a>
</div>
<script>
var p = 1;
$("#news .load-more").delegate("a", "click", function() {
var originText = $(this).text();
$(this).addClass("loading").text("...");
var plast = $("#newspages a").last().html();
//alert(p+'-'+plast);
$.ajax({
url: $('.newspages').find('a').eq(p).attr("href") + "#news",
success: function(data) {
result = $(data).find(".news-list li");
// 渐显新内容
p++;
$(".news-list").append(result.fadeIn(300));
$newElems = result;
$(".load-more a").removeClass("loading").text(originText);
if (p < plast) {
$(".load-more a").removeClass("loading").text(originText);
} else {
// 若没有链接，即为最后一页，则移除导航
$(".load-more").remove();
}
}
});
return false;
});

</script>

//随写

$("#loadmore").click(function() {
// body...
var _thisobj = $(this);
var pnum = _thisobj.data("key");
var load_url = $("#pages .page-li").eq(pnum).attr("href");
$.ajax({
type: "GET",
url: load_url,
success: function(result){
if(load_url){
var new_html = $(result).find("#art-list ul").html();
if(new_html){
$("#art-list ul").append(new_html);
pnum++;
_thisobj.data("key",pnum);
}
}else{
_thisobj.html("已是最后一页");
_thisobj.removeAttr("id");
}
}
});
});
</script>