$.ajax+php實戰教程之下拉時自動加載更多文章原理

2020-03-22 19:31:15

字體：大中小

來源：轉載

供稿：網友

一、糾結文章的風格

話說藝靈這個網站成立到現在快3年了，3年來，沒怎么盈利。藝靈堅持不定期更新文章，對于文章的風格也在不斷的調整。也不知道看官們都喜歡什么風格的文章，一直也沒有看官反饋意見......

今天呢，藝靈將再次更換一種全新的風格--嘗試采用由淺入深，由原理到簡單案例再到實戰流程的風格寫一些教程文章。歡迎各位看官提出自己寶貴的意見。至于文章風格的改變，無疑是藝靈想盡可能讓看官能夠更直白、更清楚的明白文章講的是什么、有什么用途以及看官能夠學到些什么。(如果看官覺得讀完文章后有所收獲，可以拿起手機掃下文章下面的付款碼，贊助下藝靈的付出，謝謝。)

二、引入案例

2.1、引入案例

不知道看官們玩qq空間不，如果玩過qq空間的看官應該能看到這樣一個現象：瀏覽好友動態時，快瀏覽到最下面的時候，系統會自動加載一批好友動態。配結構圖一張：

瀏覽qq空間好友動態時會自動加載更多動態

今天呢，我們將來分析這個效果的原理，然后做一個簡單的案例，明天再結合php+sql進行一個真實的案例講解。

三、準備工作

我們還是先來看下如果想要實現這個功能都需要具備些什么吧！
1、任意一款編輯器，例如：Dreamweaver 、HBuilder、Sublime Text、EditPlus、Notepad++等；
2、會p+css布局；
3、有js或jq基礎；
4、會使用ajax；
5、會php及sql語句查詢；

下面我們將針對上面的準備工作進行一一突破！

3.1、解決編輯器問題

編輯器這玩意兒，就不需要多說了吧。直接上網搜索就是，然后下載下來后進行解壓、安裝之類的步驟。如果看官不會此步驟，建議瀏覽文章→→Dreamweaver Cs6安裝，按照文章來進行安裝Dreamweaver 軟件。

3.2、解決p+css布局問題

前面說過，今天只講一個簡單的案例，所以我們只需要一個簡單的布局即可。布局的話就以上面的分析圖為例。在上代碼前，藝靈建議看官根據上面的分析圖進行自己寫代碼，標簽隨便用，但要注意核心內容。

3.2.1、html布局

 !--主內容區--  p >

有了布局，我們還需要css對其進行美化。

3.2.2、css樣式

 style type= text/css .main{width:1190px;border:1px solid #ccc;margin:10px auto}.main-body,.ylsj-main{height:1600px;background:#ddd;margin:0 auto}.ylsj-main{background:#B5F3C3;}#ylsj-load{width:90%;border:1px solid #ccc;height:40px;line-height:40px;margin:10px auto;font-size:12px;color:#888;border-radius:8px;text-align:center} /style

來張上面源碼展示的效果圖吧！配圖：用p+css實現的靜態布局圖

好了，布局這一步也搞定了，接下來開始有點難度了哦！

四、js/jq做什么？

不知道看官有沒有注意，此時藝靈已將jq單獨拿出來講了，畢竟這個不是一兩行代碼就能說得清的。我們還是來進行進一步分析下這個案例的效果吧！

默認情況下，我們從上向下瀏覽好友動態，此時如同瀏覽正常網頁；當快瀏覽完好友動態時，普通的網頁是見到了底部，已經沒有內容了，而騰訊的呢？他是自動又進行了加載，然后將數據插入到頁面中，由于頁面有了新的數據，所以此時瀏覽器滾動條距離底部還有很長一段距離，此時我們仿佛又回到了之前的狀態，繼續下拉瀏覽。當再次快要拉到底的時候，數據又進行加載并填充，然后又是繼續瀏覽，如此反復......

那么問題來了！
1、如何知道用戶快要瀏覽完內容呢？
2、快瀏覽完時怎么去觸發自動加載事件呢？

既然有問題，那我們就得去解決問題。

不知道看官有沒有注意剛才藝靈的描述，描述中有一個關鍵點滾動條！

那滾動條可干嘛呢？在我們這個案例中起什么作用呢？

我們可以計算滾動條距離頁面頂部的距離呀！

計算這個距離有什么用呢？

單獨這個距離是沒什么用，但別忘記了，html源碼中還有一個#ylsj-load的標簽！有沒有發現上面的配圖中并沒有看到這個#ylsj-load？

咦！對啊，我怎么沒有看到呢？去哪兒了？

沒有看到就對了，要是看到了，那就起不到作用了！

之所以看到不到，是因為他在下面，被默認內容撐下去了。前面說了，瀏覽器滾動后可以得出一個滾動的高度，此時這個#ylsj-load距離頂部也是有一個高度的。當#ylsj-load快要顯示的時候也就表示著快到拉到底了，配圖：瀏覽器快拉到底時顯示加載按鈕此時我們就需要去觸發加載了。

至此，我們剛提的兩個問題就已經解決了，現在來寫jq代碼吧！

4.1、jq判斷是否快到拉到底部

4.1.1、jq判代碼

 !--引入jquery庫，建議1.8版本以上，如果頁面中已引入，可忽略此庫--  script type= text/javascript src= /uploads/allimg/190511/13541113Q-3.jpg /script  script /*頁面滾動*/$(window).scroll(function(){var t=$(this).scrollTop();/*獲取滾動時距離瀏覽器頂部的值*/var h=$(this).height();/*獲取當前窗口的高度*/var h1=$( #ylsj-load ).offset().top;/*獲取按鈕距離瀏覽器頂部的值*//*用按鈕的值-滾動條的值與窗口高度進行比較，如果小時，則表示按鈕進入可視區，同時也表示滾動條即將到達底部*/if(h1-t h){/*彈出一個窗口，提示用戶下面沒有內容了*/alert( 別往下拉了，下拉就沒有了！  /script

此時我們去刷新頁面，嘗試向下拉動滾動條，快到底部時可以看到有彈窗提示。配圖：

既然可以看到彈窗，表示我們的js代碼成功了。接下來就是添加數據了。

4.2、觸發點擊事件添加數據

今天我們不講ajax和php，明天再講。今天只講一個簡單的點擊加載數據操作。

由于我們今天沒有數據，那就用一個盒子充當數據吧。

現在數據有了，但又有新的問題！
1、點擊事件怎么寫？
2、新的“數據”如何插入到頁面中？

4.2.1、點擊事件

 script $( #ylsj-load ).click(function(){ alert( 點我想干嘛？加載數據？？  /script

此時我們手動去點擊“點擊加載更多內容......”這個按鈕會看到有彈窗提示，配圖：

4.2.2、插入內容

$(this).before( p >

我們將上面的代碼放到4.2.1中，替換掉原alert彈框。再次點擊時配圖：

好了，差不多了。但是有一個問題：現在是點擊才去進行加載，如何做到讓他自動加載呢？？？

這個作為今天的作業吧。友情提示：建議回頭看4.1.1的代碼片段。明日會繼續進行后續講解。

上次留下的問題不知道看官們有沒有解決，沒有解決的看下面的答案吧。

4.4、自動加載思路

我們在4.1中已經可以判斷出滾動條是否快到拉到底部，在4.2中我們又做出了點擊事件和加載“數據”的步驟，所以我們這個自動加載可以將4.1和4 2結合起來。也就是說：當滾動條快拉到底部時，我們讓它去觸發點擊事件。

4.5、自動加載源碼

4.5.1、完整jquery代碼

!--引入jquery庫，建議1.8版本以上，如果頁面中已引入，可忽略此庫--

 script type= text/javascript src= /uploads/allimg/190511/13541113Q-3.jpg /script  script $(window).scroll(function(){ var t=$(this).scrollTop();/*獲取滾動時距離瀏覽器頂部的值*/ var h=$(this).height();/*獲取當前窗口的高度*/ var h1=$( #ylsj-load ).offset().top;/*獲取按鈕距離瀏覽器頂部的值*/ /*用按鈕的值-滾動條的值與窗口高度進行比較，如果小時，則表示按鈕進入可視區，同時也表示滾動條即將到達底部*/ if(h1-t h){ /*這里將之前的彈窗改成點擊事件*/ $( #ylsj-load ).click();var i=0;$( #ylsj-load ).click(function(){ i++; $(this).before( p >

案例欣賞：

怎么樣，是不是有點感覺了？

接下來我們繼續向下進行。

五、使用ajax發送請求

5.1、ajax格式

這個ajax的話呢，其實也不是多難，我們還是要先寫好框架，然后再進行替換上面的代碼。

5.1.1、ajax發送請求代碼

$.ajax({ type: /*類型，post或get*/ , url: 要請求的php文件地址 , data:{/*要傳遞的參數*/}, dataType: /*數據類型，html、json、xml等*/ , success:function(data){ /*成功時返回數據*/ },error:function(jqXHR){ /*失敗時進行提示*/});

上面的代碼怎么用呢？

其實我們只要稍微思考下就行了。上面是代碼，代碼需要去執行?。〖热皇切枰绦?，那什么時候才去執行呢？？？

當然是點擊的時候去觸發ajax了！好，我們繼續來完善我們的代碼。

5.2、ajax和jquery進行結合

5.2.1、ajax和jquery進行結合

 !--引入jquery庫，建議1.8版本以上，如果頁面中已引入，可忽略此庫--  script type= text/javascript src= /uploads/allimg/190511/13541113Q-3.jpg /script  script var i=0;/*定義一個變量，等會用來控制多次觸發*/$(window).scroll(function(){ var t=$(this).scrollTop();/*獲取滾動時距離瀏覽器頂部的值*/ var h=$(this).height();/*獲取當前窗口的高度*/ var h1=$( #ylsj-load ).offset().top;/*獲取按鈕距離瀏覽器頂部的值*/ /*用按鈕的值-滾動條的值與窗口高度進行比較，如果小時，則表示按鈕進入可視區，同時也表示滾動條即將到達底部*/ if(h1-t h){ if(i==0){/*防止快速下拉時多次觸發*/ i=1;/*改變i的值*/ /*這里將之前的彈窗改成點擊事件*/ $( #ylsj-load ).click();$( #ylsj-load ).click(function(){ /*將原來這里的內容替換成ajax動態獲取數據*/ $.ajax({ type: /*類型，post或get*/ , url: 要請求的php文件地址 , data:{/*要傳遞的參數*/}, dataType: /*數據類型，html、json、xml等*/ , success:function(data){ /*成功時返回數據*/ i=0;/*然后恢復狀態，否則繼續下拉時不能繼續執行*/ },error:function(jqXHR){ /*失敗時進行提示*/ /script

上面的代碼中還有一些參數沒有修改，因為這些參數要根據我們接下來的php進行修改。

六、php文件

6.1、分析php文件做什么事情

這個php文件里面有什么內容呢？具體內容還是要根據我們具體的案例來進行寫代碼。

舉個例子：我們要做一個下拉時自動加載文章的效果。既然是加載文章，所以我們需要知道以下這些數據：文章標題、文章簡介、文章縮略圖、發表日期、來源網站、作者、閱讀量、評論數等等。這些數據都需要通過這個php文件傳遞給我們上面的ajax。

6.2、sql語句查詢信息

既然是傳遞數據，我們就需要去查詢數據。不可能說直接把信息寫死，這是不現實的！所以，這個php文件中還要有我們的sql語句。

哦賣糕的！前面的jquery還能稍微理解，后面的ajax完全不能理解，更不用提什么php和sql查詢了。想必部分看官會有這樣的感想。

那怎么辦呢？按照文章思路去學習對應的知識唄！如果只知道copy代碼而不知道原理及流程的話，換個地方又不會使用了。

七、最后

下拉時自動加載的原理大致就是這樣，對于源碼，基本上是大同小異。下次藝靈將會調用幾個網站管理系統中的數據來做成插件，到時需要的看官可根據自己的需求進行下載對應的插件。

本篇文章講解了$.ajax+php實戰教程之下拉時自動加載更多文章原理，更多相關內容請關注php 。