php怎么实现点击加载更多

PHP中文网 • 2025年3月5日 14:31:47 • 编程技术 • 阅读 2

php实现点击加载更多的方法：首先新建index.php并引入jQuery库；然后新建“connect_sql.php”；最后修改index.php里的js脚本即可。

本文操作环境：Windows7系统、PHP7.1版，DELL G3电脑

php怎么实现点击加载更多？

jQuery+PHP实现点击按钮加载更多，不刷新页面加载更多数据！附：可用源码+demo

先上效果：

立即学习“PHP免费学习笔记（深入）”；

刚打开页面的时候，只显示部分数据，点击加载更多的时候，就会加载我们预先定义的加载数量显示出来！当数据库里面的所有数据都显示出来，就提示全部加载了！

新建index.php

            jQuery+php实现点击按钮加载更多        *{margin: 0;padding:0;list-style: none;}    a{color: #333;text-decoration: none;}    .hidden{display:none;}    .content{width: 300px;height:auto;margin:0 auto;overflow: hidden;text-align: left;background:#fff;padding:5px;}    .content ul.list{overflow: hidden;}    .content ul.list li{width: 300px;height:auto;margin:5px;float:left;overflow:hidden;text-align:center;}    .content .more{overflow: hidden;padding:10px;text-align: center;}    .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;}    .content .more a:hover{text-decoration: none;background: red;color: #fff;}                    
                    
        数据加载中，请稍后...
        点击加载更多

    
                var _content = []; //临时存储li循环内容        var loadding = {            _default:3, //默认个数            _loading:3, //每次点击按钮后加载的个数            init:function(){                var lis = $(".content .hidden li");                $(".content ul.list").html("");                for(var n=0;n<loadding._default;n++){                    lis.eq(n).appendTo(".content ul.list");                }                for(var i=loadding._default;i<lis.length;i++){                    _content.push(lis.eq(i));                }                $(".content .hidden").html("");            },            loadMore:function(){                var mLis = $(".content ul.list li").length;                for(var i =0;i<loadding._loading;i++){                    var target = _content.shift();                    if(!target){                        $('.content .more').html("已加载全部...
");                        break;                    }                    $(".content ul.list").append(target);                }            }        }        loadding.init();

登录后复制

上面是页面的布局，其中内嵌了php代码，这部分的代码其实就是查询数据库并输出数据库的所有数据。注意，index.php里面需要引入jQuery库，jquery.min.js自己可以去网上下载这个压缩版的。我把php代码全部用一个独立文件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("SET NAMES UTF8");//查询数据库mysql_select_db($db, $con);//获取数据$result = mysql_query("SELECT * FROM $tb ORDER BY id ASC");while($row = mysql_fetch_array($result)){        echo "".$row[title]."
";        echo "
";    }?>

登录后复制

connect_sql.php就是简单的数据库查询并输出，但是输出的内容必须是套在

里面的。当然如果你想套在其他的标签里，那就在index.php里的js脚本里面自己改。

下面是数据库：
数据库账号，密码，地址这个根据自己的开发配置填，我的代码里面，数据库名为loadMore，表名为list
下面是结构截图：