您的位置：首页 > 其它

Ajax 实现点击按钮加载更多

2017-09-30 20:05 661 查看

html中主要是，实现模板引擎，放一个需要追加内容的盒子。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/css_comment.css"/>
<script src="../js/jquery-1.11.2.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/template-native-debug.js" type="text/javascript" charset="utf-8"></script>
<script id="tpl" type="text/html">

<% for(var i=0; i< 6; i++ ) { %>
<div class="small_box">
<div class="small_box_left">
<a href=""><img src="<%= info[i].thumb %>"/></a>
</div>
<div class="small_box_right">
<p><a href="#"><%= info[i].title %></a></p>
<p class="text"><%= info[i].description %></p>
<a href="#"><span class="glyphicon glyphicon-play-circle"> 今日影评</span></a>
<span class="text2"><%= info[i].date %></span>
</div>
</div
<% } %>

</script>
<script src="JS/commentJs.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="container">

<div id="left">

</div>
<div id="gengduo">
<a href="javascript:void(0)" id="moreCommemt"><p>更多评论</p></a>
</div>

</div>

</body>
</html>
//点击更多建立请求，下面是commentJS代码
$(function(){
var i =1;
$.ajax({
type:"get",
url:"http://www.1905.com/api/content/index.php?m=converged&a=comment&page="+i+"&pagesize=20&callback=successgetall",
dataType:"jsonp",
success: function (data) {
if (data.count != 20) {
console.log(data);
$("#left").text("亲，没有获取到数据");
return;
}
//通过模板渲染html
var html = template("tpl",data);
$("#left").html(html);
},
error: function () {
$("#left").text("亲，出错了");
}
}); //这段ajax代码是上来循环遍历节点的，因为html中已经注释掉了
$("#moreCommemt").click(function(){
i++;
// url:"http://www.1905.com/api/content/index.php?m=converged&a=comment&page="+i+"&a
9299
mp;pagesize=20&callback=successgetall",
//这个url这参数page=2用来获得是哪一个页面
$.ajax({
type:"get",
url:"http://www.1905.com/api/content/index.php?m=converged&a=comment&page="+i+"&pagesize=20&callback=successgetall",
dataType:"jsonp",
success: function (data) {
if (data.count != 20) {
console.log(data);
$("#left").text("亲，没有获取到数据");
return;
}
//通过模板渲染html
var html = template("tpl",data);
$("#left").append(html);
},
error: function () {
$("#left").text("亲，出错了");
}
});

});
})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航