How to achieve click to load more in php

php method to implement click-to-load more: first create a new index.php and introduce the jQuery library; then create a new "connect_sql.php"; and finally modify the js script in index.php.

The operating environment of this article: Windows7 system, PHP7.1 version, DELL G3 computer

How to click to load more in php?

jQuery PHP enables clicking the button to load more data without refreshing the page! Attachment: Available source code demo

First effect:

When you first open the page, only part of the data is displayed, click to load updates When there are more, our predefined loading number will be loaded and displayed! When all the data in the database is displayed, it will prompt that everything has been loaded!

New index.php

nbsp;html>


    <meta>
    <meta>
    <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: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;}
    </style>


    <!--代码部分begin-->
    <p>
        </p><p>
            <?php             //获取数据
            require_once("connect_sql.php");
            ?>
        </p>
        

数据加载中，请稍后...

        

点击加载更多

         <script></script>     <script> 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){ $(&#39;.content .more&#39;).html("<p style=&#39;color:#f00;&#39;>已加载全部..."); break; } $(".content ul.list").append(target); } } } loadding.init(); </script>     

The above is the layout of the page, with php code embedded in it. This part of the code actually queries the database and outputs all the data in the database. Note that the jQuery library needs to be introduced in index.php. You can download the compressed version of jquery.min.js from the Internet. I wrote all the PHP code in a separate file connect_sql.php, and then introduced it directly into index.php through

<?php //获取数据
require_once("connect_sql.php");
?>

New 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(&#39;连接数据库失败，失败原因：&#39; . 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 "<li>".$row[title]."";
        echo "<br>";
    }
?>

connect_sql.php It is a simple database query and output, but the output content must be enclosed in

. Of course, if you want to include it in other tags, then change it yourself in the js script in index.php.

The following is the database:
The database account, password, and address are filled in according to your own development configuration. In my code, the database name is loadMore, and the table name is list
The following is a screenshot of the structure:

Ok That’s all
It’s very simple!
Recommended learning: "PHP Video Tutorial"

The above is the detailed content of How to achieve click to load more in php. For more information, please follow other related articles on the PHP Chinese website!