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

LeoHsiun 發(fā)布于2019-08-26 11:48 / 1931人閱讀

摘要：注意，里面需要引入庫，自己可以去網(wǎng)上下載這個壓縮版的。下面是數(shù)據(jù)庫數(shù)據(jù)庫賬號，密碼，地址這個根據(jù)自己的開發(fā)配置填，我的代碼里面，數(shù)據(jù)庫名為，表名為下面是結(jié)構(gòu)截圖就這么多了很簡單吧本教程由里客云資源站提供

先上效果：

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

新建index.php




    
    
    jQuery+php實(shí)現(xiàn)點(diǎn)擊按鈕加載更多
    


    
    
        
            
        
        數(shù)據(jù)加載中，請稍后...
        點(diǎn)擊加載更多

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

直接引入到index.php中

新建connect_sql.php

".$row[title]."";
        echo "
";
    }
?>

connect_sql.php就是簡單的數(shù)據(jù)庫查詢并輸出，但是輸出的內(nèi)容必須是套在

里面的。當(dāng)然如果你想套在其他的標(biāo)簽里，那就在index.php里的js腳本里面自己改。

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

Ok就這么多了
很簡單吧！
本教程由里客云資源站提供
http://www.likeyunba.com/

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/107605.html

相關(guān)文章

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

摘要：注意，里面需要引入庫，自己可以去網(wǎng)上下載這個壓縮版的。下面是數(shù)據(jù)庫數(shù)據(jù)庫賬號，密碼，地址這個根據(jù)自己的開發(fā)配置填，我的代碼里面，數(shù)據(jù)庫名為，表名為下面是結(jié)構(gòu)截圖就這么多了很簡單吧本教程由里客云資源站提供先上效果：showImg(https://segmentfault.com/img/bV37XZ?w=294&h=592); 剛打開頁面的時候，只顯示部分?jǐn)?shù)據(jù)，點(diǎn)擊加載更多的時候，就會...

Ashin 2019-06-28 18:26 評論0 收藏0
RecyclerView封裝庫和綜合案例【包含25篇博客】

摘要：支持復(fù)雜頁面，例如添加自定義頭部和底部布局，支持橫向滑動，還可以支持粘貼頭部類似微信好友分組，支持不規(guī)則瀑布流效果，支持側(cè)滑刪除功能。支持粘貼頭部的需求效果，這種效果類似微信好友分組的那種功能界面。目錄介紹 1.復(fù)雜頁面庫介紹 2.本庫優(yōu)勢亮點(diǎn) 2.1 支持多種狀態(tài)切換管理 2.2 支持添加多個header和footer 2.3 支持側(cè)滑功能和拖拽移動 2.4 其他亮點(diǎn)介紹 ...

silenceboy 2019-08-16 17:02 評論0 收藏0
原生js滾動到底部加載數(shù)據(jù)和下拉刷新 Scrollload

摘要：原文地址初衷如今移動端站點(diǎn)越來越多，滾動到底部加載數(shù)據(jù)和下拉刷新的需求非常的常見，即使現(xiàn)在很多站點(diǎn)也會有這樣的需求，比如百度首頁就有。原文地址 https://github.com/fa-ge/Scrollload/blob/master/README.md 初衷如今移動端站點(diǎn)越來越多，滾動到底部加載數(shù)據(jù)和下拉刷新的需求非常的常見，即使現(xiàn)在很多pc站點(diǎn)也會有這樣的需求，比如百度首頁...

HollisChuang 2019-08-20 13:34 評論0 收藏0
RxJS 教程

摘要：是針對異步數(shù)據(jù)流的編程。所以這個數(shù)據(jù)流只包含一個簡單的反射值。且慢，天生就是處理異步數(shù)據(jù)流的，為何不把請求的響應(yīng)作為一個攜帶數(shù)據(jù)的流呢么么噠，概念上沒有問題，我們就來操作一下。你需要明確通知觀察者或者訂閱者數(shù)據(jù)流的到達(dá)或者錯誤的發(fā)生。 Reactive Programming是神馬？互聯(lián)網(wǎng)上有很多不是很友好的解釋。維基百科寬泛而玄乎。 Stackoverflow教科書式的解釋非常不...

KnewOne 2019-08-19 17:22 評論0 收藏0
Web前端經(jīng)典面試試題（三）

摘要：包含基于和標(biāo)準(zhǔn)的表示使用進(jìn)行動態(tài)顯示和交互使用與服務(wù)器進(jìn)行異步通信使用綁定一切。重定向表示要完成請求，需要進(jìn)一步操作。方法可將一個函數(shù)的對象上下文從初始的上下文改變?yōu)橛芍付ǖ男聦ο蟆? 一. 什么是Ajax？？？術(shù)語Ajax用來描述一組技術(shù)，它使瀏覽器可以為用戶提供更為自然的瀏覽體驗(yàn)。 Ajax它是Asynchronous JavaScript + XML的簡寫定義Ajax： ...

DrizzleX 2019-08-02 11:49 評論0 收藏0