Ajax 实现点击按钮加载更多

2017-09-30 21:52:22来源:CSDN作者:qq_37217713人点击

分享

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+"&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("亲,出错了");                    }              }); 	              	});})	




最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台