溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

php實(shí)現(xiàn)點(diǎn)擊加載更多的方法

發(fā)布時(shí)間：2021-06-18 10:02:45 來源：億速云 閱讀：296 作者：chen 欄目：編程語言

本篇內(nèi)容主要講解“php實(shí)現(xiàn)點(diǎn)擊加載更多的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“php實(shí)現(xiàn)點(diǎn)擊加載更多的方法”吧!

php實(shí)現(xiàn)點(diǎn)擊加載更多的方法：首先新建index.php并引入jQuery庫；然后新建“connect_sql.php”；最后修改index.php里的js腳本即可。

本文操作環(huán)境：Windows7系統(tǒng)、PHP7.1版，DELL G3電腦

php怎么實(shí)現(xiàn)點(diǎn)擊加載更多？

jQuery+PHP實(shí)現(xiàn)點(diǎn)擊按鈕加載更多，不刷新頁面加載更多數(shù)據(jù)！附：可用源碼+demo

先上效果：

php實(shí)現(xiàn)點(diǎn)擊加載更多的方法

剛打開頁面的時(shí)候，只顯示部分?jǐn)?shù)據(jù)，點(diǎn)擊加載更多的時(shí)候，就會(huì)加載我們預(yù)先定義的加載數(shù)量顯示出來！當(dāng)數(shù)據(jù)庫里面的所有數(shù)據(jù)都顯示出來，就提示全部加載了！

新建index.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQuery+php實(shí)現(xiàn)點(diǎn)擊按鈕加載更多</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
            //獲取數(shù)據(jù)
            require_once("connect_sql.php");
            ?>
        </p>
        <ul class="list">數(shù)據(jù)加載中，請(qǐng)稍后...</ul>
        <p class="more"><a href="javascript:;" onClick="loadding.loadMore();">點(diǎn)擊加載更多</a></p><br/>
    </p>
    <script src="jquery.min.js"></script>
    <script>
        var _content = []; //臨時(shí)存儲(chǔ)li循環(huán)內(nèi)容
        var loadding = {
            _default:3, //默認(rèn)個(gè)數(shù)
            _loading:3, //每次點(diǎn)擊按鈕后加載的個(gè)數(shù)
            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>

上面是頁面的布局，其中內(nèi)嵌了php代碼，這部分的代碼其實(shí)就是查詢數(shù)據(jù)庫并輸出數(shù)據(jù)庫的所有數(shù)據(jù)。注意，index.php里面需要引入jQuery庫，jquery.min.js自己可以去網(wǎng)上下載這個(gè)壓縮版的。我把php代碼全部用一個(gè)獨(dú)立文件connect_sql.php寫，然后通過

<?php
//獲取數(shù)據(jù)
require_once("connect_sql.php");
?>

直接引入到index.php中

新建connect_sql.php

<?php
//頁面字符編碼
header("Content-type:text/html;charset=utf-8");
//隱藏報(bào)錯(cuò)信息
error_reporting(E_ALL^E_NOTICE^E_WARNING);

//數(shù)據(jù)庫地址
$host="localhost";
//數(shù)據(jù)庫賬號(hào)
$username="root";
//數(shù)據(jù)庫密碼
$password="root";
//數(shù)據(jù)庫名
$db="loadMore";
//數(shù)據(jù)庫表名
$tb="list";

//連接數(shù)據(jù)庫
$con = mysql_connect($host,$username,$password);
if (!$con)
    {
       die('連接數(shù)據(jù)庫失敗，失敗原因：' . mysql_error());
    }
//設(shè)置數(shù)據(jù)庫字符集  
mysql_query("SET NAMES UTF8");
//查詢數(shù)據(jù)庫
mysql_select_db($db, $con);
//獲取數(shù)據(jù)
$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就是簡(jiǎn)單的數(shù)據(jù)庫查詢并輸出，但是輸出的內(nèi)容必須是套在<li></li>里面的。當(dāng)然如果你想套在其他的標(biāo)簽里，那就在index.php里的js腳本里面自己改。

下面是數(shù)據(jù)庫：
數(shù)據(jù)庫賬號(hào)，密碼，地址這個(gè)根據(jù)自己的開發(fā)配置填，我的代碼里面，數(shù)據(jù)庫名為loadMore，表名為list
下面是結(jié)構(gòu)截圖：

php實(shí)現(xiàn)點(diǎn)擊加載更多的方法

Ok就這么多了
很簡(jiǎn)單吧！

到此，相信大家對(duì)“php實(shí)現(xiàn)點(diǎn)擊加載更多的方法”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

php
AI
助
手