<!doctype html> <html> <Meta charset="UTF-8"> <title>PHP+jquery+ajax+json简单小例子</title> <head> <style> #container { border: 1px solid #999; margin: 10px auto; width: 660px; } .single_item { border-bottom: 1px dotted #d3d3d3; padding: 20px; } .author { color: #39f; font-weight: bold; left: 0; position: absolute; } .date { color: #999; position: absolute; right: 0; } .content { line-height: 20px; word-break: break-all; } .element_head { height: 20px; position: relative; width: 100%; } .nodata { color: #999; display: none; font-size: 14px; height: 32px; line-height: 32px; text-align: center; } </style> </head> <body> <div id="container"> <div class="single_item"> <div class="element_head"> <div class="date">10-09 16:17</div> <div class="author">demo3</div> </div> <div class="content">上的发生</div> </div> <div class="single_item"> <div class="element_head"> <div class="date">10-09 16:17</div> <div class="author">demo1</div> </div> <div class="content">上的发生的</div> </div> <div class="single_item"> <div class="element_head"> <div class="date">10-09 12:49</div> <div class="author">demo1</div> </div> <div class="content">dfgdfgdfgdfgdfg</div> </div> <div class="single_item"> <div class="element_head"> <div class="date">10-09 12:49</div> <div class="author">demo2</div> </div> <div class="content">dfgdfgdfg</div> </div> <div class="single_item"> <div class="element_head"> <div class="date">10-09 12:49</div> <div class="author">demo3</div> </div> <div class="content">dgdfgdfgdfgdg</div> </div> <div class="single_item"> <div class="element_head"> <div class="date">10-09 12:49</div> <div class="author">demo1</div> </div> <div class="content">fgfdfgdfg</div> </div> <div class="single_item"> <div class="element_head"> <div class="date">10-09 11:54</div> <div class="author">demo2</div> </div> <div class="content">所发生的</div> </div> <div class="single_item"> <div class="element_head"> <div class="date">10-08 23:34</div> <div class="author">demo1</div> </div> <div class="content">寺夺震</div> </div> <div class="single_item"> <div class="element_head"> <div class="date">10-08 18:00</div> <div class="author">demo2</div> </div> <div class="content">123456 </div> </div> <div class="single_item"> <div class="element_head"> <div class="date">10-08 18:00</div> <div class="author">demo3</div> </div> <div class="content">这场戏</div> </div> <div class="single_item"> <div class="element_head"> <div class="date">10-08 17:18</div> <div class="author">demo2</div> </div> <div class="content">hello</div> </div> <div class="single_item"> <div class="element_head"> <div class="date">10-08 11:58</div> <div class="author">demo4</div> </div> <div class="content">就这样长大了 </div> </div> <div class="single_item"> <div class="element_head"> <div class="date">10-08 11:58</div> <div class="author">demo2</div> </div> <div class="content">简简单单的孩子</div> </div> </div> <div class="nodata"></div> </body> </html> <script src="jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(function(){ var winH = $(window).height(); //页面可视区域高度 //之前这里没有设置文件头<!doc type> $(window).height()获取到的是文档的高度 var i = 1; //设置当前页数 var load = true;//此处定义load 防止重复加载. 此处初始化，第一次滚动时即可触发加载 $(window).scroll(function () { var pageH = $(document.body).height(); var scrollT = $(window).scrollTop(); //滚动条top var aa = (pageH-winH-scrollT)/winH; if(aa<0.02 && load===true){ load = false; //在该次请求处理完之前load为false，页面的滚动不会加载 $.getJSON('data.PHP',{page:i},function(json){ if(json){ var str = ""; $.each(json,function(index,array){ str += "<div class='single_item'><div class='element_head'>"; str += "<div class='date'>"+array['time']+"</div>"; str += "<div class='author'>"+array['name']+"</div>"; str += "</div><div class=\"content\">"+array['name']+"</div></div>"; }); $("#container").append(str); load = true; //当该次请求处理完成后，改变load值为true i++; //+1,此时页面滚动会再次触发加载 }else{ load = false; $(".nodata").show().html("别滚动了，已经到底了。。。"); return false; } }); } }); }); </script>
PHP
<?PHP function get_data(){ $page = $_GET['page'] ? $_GET['page'] : 1; $page_size = 10; $data = array(); for($i=0;$i<100;$i++){ $data[] = array('id' => $i,'name'=>'test'.$i,'time'=>@date('Y-m-d H:i:s',time())); } $res = array_slice($data,($page-1)*$page_size,$page_size); $return = empty($res) ? null : $res; echo json_encode($return); } get_data(); ?>原文链接：https://www.f2er.com/ajax/164080.html
