找回密码
 立即注册

QQ登录

只需一步,快速开始

[js] jQuery+PHP实现点击按钮加载更多,不刷新页面加载更多数据...

[复制链接]
查看: 763|回复: 0
最佳答案
0 

51

主题

181

帖子

5105

积分

S1

积分
5105
 楼主| 发表于 2018-2-23 16:01:12 | 显示全部楼层 |阅读模式
先上效果:
GIF.gif
刚打开页面的时候,只显示部分数据,点击加载更多的时候,就会加载我们预先定义的加载数量显示出来!当数据库里面的所有数据都显示出来,就提示全部加载了!
新建index.php
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title>jQuery+php实现点击按钮加载更多</title>
  7.     <style>
  8.     *{margin: 0;padding:0;list-style: none;}
  9.     a{color: #333;text-decoration: none;}
  10.     .hidden{display:none;}
  11.     .content{width: 300px;height:auto;margin:0 auto;overflow: hidden;text-align: left;background:#fff;padding:5px;}
  12.     .content ul.list{overflow: hidden;}
  13.     .content ul.list li{width: 300px;height:auto;margin:5px;float:left;overflow:hidden;text-align:center;}
  14.     .content .more{overflow: hidden;padding:10px;text-align: center;}
  15.     .content .more a{display: block;width: 120px;padding:8px 0;color:#fff;margin:0 auto;background:#333;text-align:center;border-radius:100px;font-size: 15px;}
  16.     .content .more a:hover{text-decoration: none;background: red;color: #fff;}
  17.     </style>
  18. </head>
  19. <body>
  20.     <!--代码部分begin-->
  21.     <div class="content">
  22.         <div class="hidden">
  23.             <?php
  24.             //获取数据
  25.             require_once("connect_sql.php");
  26.             ?>
  27.         </div>
  28.         <ul class="list">数据加载中,请稍后...</ul>
  29.         <div class="more"><a href="javascript:;" onClick="loadding.loadMore();">点击加载更多</a></div><br/>
  30.     </div>
  31.     <script src="jquery.min.js"></script>
  32.     <script>
  33.         var _content = []; //临时存储li循环内容
  34.         var loadding = {
  35.             _default:3, //默认个数
  36.             _loading:3, //每次点击按钮后加载的个数
  37.             init:function(){
  38.                 var lis = $(".content .hidden li");
  39.                 $(".content ul.list").html("");
  40.                 for(var n=0;n<loadding._default;n++){
  41.                     lis.eq(n).appendTo(".content ul.list");
  42.                 }
  43.                 for(var i=loadding._default;i<lis.length;i++){
  44.                     _content.push(lis.eq(i));
  45.                 }
  46.                 $(".content .hidden").html("");
  47.             },
  48.             loadMore:function(){
  49.                 var mLis = $(".content ul.list li").length;
  50.                 for(var i =0;i<loadding._loading;i++){
  51.                     var target = _content.shift();
  52.                     if(!target){
  53.                         $('.content .more').html("<p style='color:#f00;'>已加载全部...</p>");
  54.                         break;
  55.                     }
  56.                     $(".content ul.list").append(target);
  57.                 }
  58.             }
  59.         }
  60.         loadding.init();
  61.     </script>
  62.     <!--代码部分end-->
  63. </body>
  64. </html>
复制代码
上面是页面的布局,其中内嵌了php代码,这部分的代码其实就是查询数据库并输出数据库的所有数据。注意,index.php里面需要引入jQuery库,jquery.min.js自己可以去网上下载这个压缩版的。我把php代码全部用一个独立文件connect_sql.php写,然后通过
  1. <?php
  2. //获取数据
  3. require_once("connect_sql.php");
  4. ?>
复制代码
直接引入到index.php中
新建connect_sql.php
  1. <?php
  2. //页面字符编码
  3. header("Content-type:text/html;charset=utf-8");
  4. //隐藏报错信息
  5. error_reporting(E_ALL^E_NOTICE^E_WARNING);

  6. //数据库地址
  7. $host="localhost";
  8. //数据库账号
  9. $username="root";
  10. //数据库密码
  11. $password="root";
  12. //数据库名
  13. $db="loadMore";
  14. //数据库表名
  15. $tb="list";

  16. //连接数据库
  17. $con = mysql_connect($host,$username,$password);
  18. if (!$con)
  19.     {
  20.        die('连接数据库失败,失败原因:' . mysql_error());
  21.     }
  22. //设置数据库字符集  
  23. mysql_query("SET NAMES UTF8");
  24. //查询数据库
  25. mysql_select_db($db, $con);
  26. //获取数据
  27. $result = mysql_query("SELECT * FROM $tb ORDER BY id ASC");
  28. while($row = mysql_fetch_array($result)){
  29.         echo "<li>".$row[title]."</li>";
  30.         echo "<br/>";
  31.     }
  32. ?>
复制代码
connect_sql.php就是简单的数据库查询并输出,但是输出的内容必须是套在<li></li>里面的。当然如果你想套在其他的标签里,那就在index.php里的js脚本里面自己改。
下面是数据库:
数据库账号,密码,地址这个根据自己的开发配置填,我的代码里面,数据库名为loadMore,表名为list
下面是结构截图:
432006766-5a8fca1119857_articlex.png
Ok就这么多了
很简单吧!
本教程由里客云资源站提供
http://www.likeyunba.com/

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com