当前位置：首页 > PHP教程 > php高级应用 > 列表

php原生上拉加载以及点击加载更多的实现方法（代码示例）

发布:smiling　来源: PHP粉丝网 　添加日期：2019-12-31 13:49:59　浏览: 评论：0　

本篇文章给大家带来的内容是关于php原生上拉加载以及点击加载更多的实现方法（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

设计目的:

一个网站的数据非常多的时候，需要分页，方便浏览，为了方便翻页，那么我们摒弃传统的点击翻页，直接往下拉，不停地自动加载数据，这样就可以方便阅读。

设计原理:

通过ajax向后端接口发起翻页请求，发送页码，后端接收页码，返回json数据，前端jquery解析json并且拼接在原有的数据基础上！

代码:index.html

  1. <!DOCTYPE html> 
  2.  
  3. <html> 
  4.  
  5. <head> 
  6.  
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  8.  
  9.     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  10.  
  11.     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover"> 
  12.  
  13.     <meta name="apple-mobile-web-app-capable" content="yes"> 
  14.  
  15.     <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  16.  
  17.     <meta name="format-detection" content="telephone=no"> 
  18.  
  19.     <title>jquery+ajax上拉加载更多</title> 
  20.  
  21.     <style> 
  22.  
  23.         *{margin:0;padding: 0;} 
  24.  
  25.         #text p{ 
  26.  
  27.             width: 80%; 
  28.  
  29.             padding: 5px 5px; 
  30.  
  31.             background: #eee; 
  32.  
  33.             margin:5px auto; 
  34.  
  35.         } 
  36.  
  37.         #loadmore{ 
  38.  
  39.             width: 120px; 
  40.  
  41.             background: #eee; 
  42.  
  43.             height: 45px; 
  44.  
  45.             border-radius: 100px; 
  46.  
  47.             margin:20px auto; 
  48.  
  49.             line-height: 45px; 
  50.  
  51.             text-align: center; 
  52.  
  53.             cursor: pointer; 
  54.  
  55.         } 
  56.  
  57.  
  58.  
  59.         #loading{ 
  60.  
  61.             text-align: center; 
  62.  
  63.         } 
  64.  
  65.     </style> 
  66.  
  67. </head> 
  68.  
  69. <body> 
  70.  
  71.     <h3 id="loading"></h3> 
  72.  
  73.     <div id="text"></div> 
  74.  
  75.     <div id="loadmore">点击加载更多</div> 
  76.  
  77. </body> 
  78.  
  79. </html> 
  80.  
  81.  
  82.  
  83. <!--引入jquery库--> 
  84.  
  85. <script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script> 
  86.  
  87. <script> 
  88.  
  89. // 定义一个变量，等会用来控制多次触发 
  90.  
  91. var i=0; 
  92.  
  93. $(window).scroll(function(){ 
  94.  
  95.   //获取滚动时距离浏览器顶部的值 
  96.  
  97. 　var t=$(this).scrollTop(); 
  98.  
  99.   //获取当前窗口的高度 
  100.  
  101. 　var h=$(this).height(); 
  102.  
  103.   //获取按钮距离浏览器顶部的值 
  104.  
  105. 　var h1=$('#loadmore').offset().top; 
  106.  
  107.   //用按钮的值-滚动条的值与窗口高度进行比较，如果小时，则表示按钮进入可视区，同时也表示滚动条即将到达底部 
  108.  
  109. 　if(h1-t<h){ 
  110.  
  111.     //防止快速下拉时多次触发 
  112.  
  113. 　　if(i==0){ 
  114.  
  115.       //改变i的值 
  116.  
  117. 　　　i=1; 
  118.  
  119. 　　　//触发点击事件 
  120.  
  121. 　　　$('#loadmore').click(); 
  122.  
  123. 　　} 
  124.  
  125. 　} 
  126.  
  127. }); 
  128.  
  129.  
  130.  
  131. // 加载初始数据 
  132.  
  133. var p = 1; 
  134.  
  135. $.ajax({ 
  136.  
  137. 　　type:"get", 
  138.  
  139. 　　url:'server.php?page=' + p, 
  140.  
  141. 　　data:{}, 
  142.  
  143. 　　dataType:"json", 
  144.  
  145. 　　success:function(data){ 
  146.  
  147.       for (var a in data){ 
  148.  
  149.           $('#text').append("<p>"+data[a].resname+"</p>"); 
  150.  
  151.           $("#loading").remove(); 
  152.  
  153.       } 
  154.  
  155.  
  156.  
  157. 　　　i=0; 
  158.  
  159.         
  160.  
  161. 　　}, 
  162.  
  163.     error:function(data){ 
  164.  
  165.  
  166.  
  167. 　　}, 
  168.  
  169.     beforeSend:function(data){ 
  170.  
  171.         $('#loading').append("加载中"); 
  172.  
  173.     } 
  174.  
  175. 　}); 
  176.  
  177.  
  178.  
  179. // 加载更多 
  180.  
  181. $('#loadmore').click(function(){ 
  182.  
  183.   p++; 
  184.  
  185. 　$.ajax({ 
  186.  
  187. 　　type:"get", 
  188.  
  189. 　　url:'server.php?page=' + p, 
  190.  
  191. 　　data:{}, 
  192.  
  193. 　　dataType:"json", 
  194.  
  195. 　　success:function(data){ 
  196.  
  197.       for (var a in data){ 
  198.  
  199.           $('#text').append("<p>"+data[a].resname+"</p>"); 
  200.  
  201.           $("#loading").remove(); 
  202.  
  203.       } 
  204.  
  205. 　　　i=0; 
  206.  
  207. 　　}, 
  208.  
  209.     error:function(data){ 
  210.  
  211. 　　　$('#text').append("<p>"+服务器错误+"</p>"); 
  212.  
  213. 　　}, 
  214.  
  215.     beforeSend:function(data){ 
  216.  
  217.         $('#loading').append("加载中"); 
  218.  
  219.     } 
  220.  
  221. 　}); 
  222.  
  223. }); 
  224.  
  225. </script> 

server.php

  1. <?php 
  2.  
  3. header("Content-type:application/json"); 
  4.  
  5. header('Access-Control-Allow-Origin:*'); 
  6.  
  7. // 连接数据库 
  8.  
  9. $con = mysql_connect("数据库地址","数据库账号","数据库密码"); 
  10.  
  11. if (!$con){die('Could not connect: ' . mysql_error());} 
  12.  
  13.  
  14.  
  15. mysql_select_db("数据库名", $con); 
  16.  
  17. mysql_query("SET NAMES UTF8"); 
  18.  
  19.  
  20.  
  21. // 每页显示条数 
  22.  
  23. $pageLine = 5; 
  24.  
  25.  
  26.  
  27. // 计算总记录数 
  28.  
  29. $ZongPage = mysql_query("select count(*) from 表名"); 
  30.  
  31.  
  32.  
  33. // 计算总页数 
  34.  
  35. $sum = mysql_fetch_row($ZongPage); 
  36.  
  37. $pageCount = ceil($sum[0]/$pageLine);    
  38.  
  39.    
  40.  
  41. // 定义页码变量 
  42.  
  43. @$tmp = $_GET['page']; 
  44.  
  45.  
  46.  
  47.    
  48.  
  49. // 计算分页起始值 
  50.  
  51. $num = ($tmp - 1) * $pageLine; 
  52.  
  53.    
  54.  
  55. // 查询语句 
  56.  
  57. $result = mysql_query("SELECT 字段 FROM  表名 ORDER BY id DESC LIMIT " . $num . ",$pageLine"); 
  58.  
  59.  
  60.  
  61. //遍历输出 
  62.  
  63. $results = array(); 
  64.  
  65. while ($row = mysql_fetch_assoc($result)) { 
  66.  
  67. $results[] = $row; 
  68.  
  69. } 
  70.  
  71. echo json_encode($results); 
  72.  
  73.  
  74.  
  75. //分页按钮 
  76.  
  77. //上一页 
  78.  
  79. $lastpage = $tmp-1; 
  80.  
  81. //下一页 
  82.  
  83. $nextpage = $tmp+1; 
  84.  
  85.  
  86.  
  87. //防止翻过界 
  88.  
  89. if (@$tmp > $pageCount) { 
  90.  
  91.     echo "[{\"result\":\"没有了\"}]"; 
  92.  
  93. } 
  94.  
  95.  
  96.  
  97. // 关闭数据库连接 
  98.  
  99. mysql_close($con); 
  100.  
  101. ?> 

以上就是php原生上拉加载以及点击加载更多的实现方法（代码示例）的详细内容。

Tags: php原生上拉加载

分享到：

推荐文章

热门文章

最新评论文章