溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“php實現點擊加載更多的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“php實現點擊加載更多的方法”吧!
php實現點擊加載更多的方法：首先新建index.php并引入jQuery庫；然后新建“connect_sql.php”；最后修改index.php里的js腳本即可。
本文操作環境：Windows7系統、PHP7.1版，DELL G3電腦
php怎么實現點擊加載更多？
jQuery+PHP實現點擊按鈕加載更多，不刷新頁面加載更多數據！附：可用源碼+demo
先上效果：
剛打開頁面的時候，只顯示部分數據，點擊加載更多的時候，就會加載我們預先定義的加載數量顯示出來！當數據庫里面的所有數據都顯示出來，就提示全部加載了！
新建index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-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: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>
</head>
<body>
<!--代碼部分begin-->
<p class="content">
<p class="hidden">
<?php
//獲取數據
require_once("connect_sql.php");
?>
</p>
<ul class="list">數據加載中，請稍后...</ul>
<p class="more"><a href="javascript:;" onClick="loadding.loadMore();">點擊加載更多</a></p><br/>
</p>
<script src="jquery.min.js"></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){
$('.content .more').html("<p style='color:#f00;'>已加載全部...</p>");
break;
}
$(".content ul.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("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]."</li>";
echo "<br/>";
}
?>connect_sql.php就是簡單的數據庫查詢并輸出，但是輸出的內容必須是套在<li></li>里面的。當然如果你想套在其他的標簽里，那就在index.php里的js腳本里面自己改。
下面是數據庫：
數據庫賬號，密碼，地址這個根據自己的開發配置填，我的代碼里面，數據庫名為loadMore，表名為list
下面是結構截圖：
Ok就這么多了
很簡單吧！
到此，相信大家對“php實現點擊加載更多的方法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
