jQuery+PHP實現點擊按鈕加載更多，不刷新頁面加載更多數據！附：可用源碼+demo

時間 2019-12-09

標籤 jquery+php jquery php 實現點擊按鈕加載更多刷新頁面數據可用源碼 demo 欄目 JQuery 简体版

原文原文鏈接

先上效果：
javascript

剛打開頁面的時候，只顯示部分數據，點擊加載更多的時候，就會加載咱們預先定義的加載數量顯示出來！當數據庫裏面的全部數據都顯示出來，就提示所有加載了！php

新建index.phphtml

<!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-->
    <div class="content">
        <div class="hidden">
            <?php
            //獲取數據
            require_once("connect_sql.php");
            ?>
        </div>
        <ul class="list">數據加載中，請稍後...</ul>
        <div class="more"><a href="javascript:;" onClick="loadding.loadMore();">點擊加載更多</a></div><br/>
    </div>
    <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寫，而後經過java

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

直接引入到index.php中mysql

新建connect_sql.phpjquery

<?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腳本里面本身改。sql

下面是數據庫：
數據庫帳號，密碼，地址這個根據本身的開發配置填，個人代碼裏面，數據庫名爲loadMore，表名爲list
下面是結構截圖：數據庫

Ok就這麼多了
很簡單吧！
本教程由裏客雲資源站提供
http://www.likeyunba.com/app