发布时间：2025-12-11 00:12:26 浏览次数：10
php实现点击加载更多的方法:首先新建index.php并引入jQuery库;然后新建“connect_sql.php”;最后修改index.php里的js脚本即可。
本文操作环境:Windows7系统、PHP7.1版,DELL G3电脑
php怎么实现点击加载更多?
jQuery+PHP实现点击按钮加载更多,不刷新页面加载更多数据!附:可用源码+demo
先上效果:
刚打开页面的时候,只显示部分数据,点击加载更多的时候,就会加载我们预先定义的加载数量显示出来!当数据库里面的所有数据都显示出来,就提示全部加载了!
新建index.php
<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>jQuery+php实现点击按钮加载更多</title><style>*{margin:0;padding:0;list-style:none;}a{color:#333;text-decoration:none;}.hidden{display:none;}.content{width:300px;height:auto;margin:0auto;overflow:hidden;text-align:left;background:#fff;padding:5px;}.contentul.list{overflow:hidden;}.contentul.listli{width:300px;height:auto;margin:5px;float:left;overflow:hidden;text-align:center;}.content.more{overflow:hidden;padding:10px;text-align:center;}.content.morea{display:block;width:120px;padding:8px0;color:#fff;margin:0auto;background:#333;text-align:center;border-radius:100px;font-size:15px;}.content.morea:hover{text-decoration:none;background:red;color:#fff;}</style></head><body><!--代码部分begin--><pclass="content"><pclass="hidden"><?php//获取数据require_once("connect_sql.php");?></p><ulclass="list">数据加载中,请稍后...</ul><pclass="more"><ahref="javascript:;"onClick="loadding.loadMore();">点击加载更多</a></p><br/></p><scriptsrc="jquery.min.js"></script><script>var_content=[];//临时存储li循环内容varloadding={_default:3,//默认个数_loading:3,//每次点击按钮后加载的个数init:function(){varlis=$(".content.hiddenli");$(".contentul.list").html("");for(varn=0;n<loadding._default;n++){lis.eq(n).appendTo(".contentul.list");}for(vari=loadding._default;i<lis.length;i++){_content.push(lis.eq(i));}$(".content.hidden").html("");},loadMore:function(){varmLis=$(".contentul.listli").length;for(vari=0;i<loadding._loading;i++){vartarget=_content.shift();if(!target){$('.content.more').html("<pstyle='color:#f00;'>已加载全部...</p>");break;}$(".contentul.list").append(target);}}}loadding.init();</script><!--代码部分end--></body></html>上面是页面的布局,其中内嵌了php代码,这部分的代码其实就是查询数据库并输出数据库的所有数据。注意,index.php里面需要引入jQuery库,jquery.min.js自己可以去网上下载这个压缩版的。我把php代码全部用一个独立文件connect_sql.php写,然后通过
<?php//获取数据require_once("connect_sql.php");?>直接引入到index.php中
新建connect_sql.php
<?php//页面字符编码header("Content-type:text/html;charset=utf-8");//隐藏报错信息error_reporting(E_ALL^E_NOTICE^E_WARNING);//数据库地址$host="localhost";//数据库账号$username="root";//数据库密码$password="root";//数据库名$db="loadMore";//数据库表名$tb="list";//连接数据库$con=mysql_connect($host,$username,$password);if(!$con){die('连接数据库失败,失败原因:'.mysql_error());}//设置数据库字符集mysql_query("SETNAMESUTF8");//查询数据库mysql_select_db($db,$con);//获取数据$result=mysql_query("select*FROM$tbORDERBYidASC");while($row=mysql_fetch_array($result)){echo"<li>".$row[title]."</li>";echo"<br/>";}?>connect_sql.php就是简单的数据库查询并输出,但是输出的内容必须是套在<li></li>里面的。当然如果你想套在其他的标签里,那就在index.php里的js脚本里面自己改。
下面是数据库:
数据库账号,密码,地址这个根据自己的开发配置填,我的代码里面,数据库名为loadMore,表名为list
下面是结构截图:
Ok就这么多了
很简单吧!
到此,相信大家对“php实现点击加载更多的方法”有了更深的了解,不妨来实际操作一番吧!这里是本站网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流