點選載入更多網頁內容效果簡單介紹
現在不少網頁功能都有這樣的效果,當我們拉到網頁低端的時候,並沒有分頁效果,而是通常有個"點選載入更多的按鈕"類似的功能,點選之後可以載入更多的內容進行外掛,當前不少的微博都有這樣的功能,下面就介紹一下如何利用ajax實現此功能。
一基本原理:
頁面載入時,jQuery向後臺請求資料,PHP通過查詢資料庫將最新的幾條記錄顯示在列表頁,在列表頁的底部有個“更多”連結,通過觸發該連結,向服務端傳送Ajax請求,後臺PHP程式得到請求引數,並作出相應,獲取資料庫相應的記錄並以JSON的形式返回給前臺頁面,前臺頁面jQuery解析JSON資料,並將資料追加到列表頁。其實就是Ajax分頁效果。
二.實現步驟:
首先引入jquery庫和jquery.more.js外掛。
jquery.more.js已經將許多功能都封裝好,並提供了引數配置的功能。
[HTML] 純文字檢視 複製程式碼<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.more.js"></script>
HTML結構如下:
[HTML] 純文字檢視 複製程式碼<div id="more"> <div class="single_item"> <div class="element_head"> <div class="date"></div> <div class="author"></div> </div> <div class="content"></div> </div> <a href="javascript:;" class="get_more">::點選載入更多內容::</a> </div>
值得一提的是,樣式single_item,get_more是和jquery.more.js外掛關聯的,也可以取另外的class名字,但是在配置的時候一定要將對應的class寫上。
CSS程式碼如下:
[CSS] 純文字檢視 複製程式碼#more{ margin:10px auto; width:560px; border:1px solid #999; } .single_item{ padding:20px; border-bottom:1px dotted #d3d3d3; } .author{ position:absolute; left:0px; font-weight:bold; color:#39f } .date{ position:absolute; right:0px; color:#999 } .content{ line-height:20px; word-break:break-all; } .element_head{ width:100%; position:relative; height:20px; } .get_more{ margin:10px; text-align:center } .more_loader_spinner{ width:20px; height:20px; margin:10px auto; background:url(loader.gif) no-repeat; }
以上CSS是本例中定製的,當然,大家可以在實際專案中定製不同的樣式。
注意:more_loader_spinner是定義載入動畫圖片的。
jQuery程式碼如下:
[JavaScript] 純文字檢視 複製程式碼$(function(){ $('#more').more({'address': 'data.php'}) });
使用很簡單,配置了後臺地址:data.php,來看data.php是怎麼處理資料的。
php程式碼如下:
data.php連結資料庫,本例使用本站文章相同的資料表。
[PHP] 純文字檢視 複製程式碼require_once('connect.php'); $last = $_POST['last']; $amount = $_POST['amount']; $user = array('demo1','demo2','demo3','demo3','demo4'); $query=mysql_query("select * from say order by id desc limit $last,$amount"); while ($row=mysql_fetch_array($query)) { $sayList[] = array( 'content'=>$row['content'], 'author'=>$user[$row['userid']], 'date'=>date('m-d H:i',$row['addtime']) ); } echo json_encode($sayList);
data.php接收前臺頁面提交過來的兩個引數,$_POST['last']即開始記錄數,$_POST['amount']即單次顯示記錄數,看SQL語句就明白,其實就是分頁中用到的語句。
然後將查詢的結果以JSON格式輸出,PHP的任務就完成了。
最後來看下jquery.more.js的引數配置。
[JavaScript] 純文字檢視 複製程式碼'amount' :'10', //每次顯示記錄數 'address': 'comments.php', //請求後臺的地址 'format': 'json', //資料傳輸格式 'template':'.single_item',//html記錄DIV的class屬性 'trigger':'.get_more',//觸發載入更多記錄的class屬性 'scroll':'false',//是否支援滾動觸發載入 'offset':'100',//滾動觸發載入時的偏移量
相關文章
- ajax載入xml檔案內容程式碼例項簡單介紹XML
- jquery製作圖片瀑布流點選按鈕載入更多內容jQuery
- 網頁點選實現下載效果網頁
- 滑鼠右鍵點選事件簡單介紹事件
- javascript關於URI相關內容簡單介紹JavaScript
- PbootCMS呼叫公司簡介等單頁內容的方法boot
- javascript判斷iframe頁面載入完畢方法簡單介紹JavaScript
- c#簡單實現提取網頁內容C#網頁
- javascript圖片預載入簡單介紹JavaScript
- PbootCMS模板如何在首頁上呼叫公司簡介等單頁內容boot
- 動態載入js檔案簡單介紹JS
- 點選返回網頁頂層效果網頁
- nodejs通過phantomjs實現下載網頁簡單介紹NodeJS網頁
- javascript的節點相關內容介紹JavaScript
- php原生上拉載入,點選載入更多(jQuery,ajax,mysql)PHPjQueryMySql
- jQuery動態載入js檔案簡單介紹jQueryJS
- js動態載入js檔案簡單介紹JS
- 對於動態載入內容 (包括 Ajax 請求內容) 繫結點選事件事件
- 點選文字框實現文字框內容選中效果
- swift點選Tableviewcell展開下拉選單內容SwiftView
- javascript方法過載簡單介紹JavaScript
- 網頁中使用css的幾種方式簡單介紹網頁CSS
- jquery實現的圖片預載入簡單介紹jQuery
- 預載入插頁式廣告介紹
- 學習內容介紹
- ARouter簡單入門和介紹
- CAS單點登入-簡介
- jquery操作select下拉選單簡單介紹jQuery
- CSS實現的網頁柵格佈局簡單介紹CSS網頁
- httprunner3原始碼解讀(1)簡單介紹原始碼模組內容HTTP原始碼
- JSON的優點簡單介紹JSON
- 按照順序動態載入js檔案簡單介紹JS
- 如何使用ScrapySharp下載網頁內容網頁
- 網路 IO 模型簡單介紹模型
- Laravel 中使用 puppeteer 採集非同步載入的網頁內容Laravel非同步網頁
- PbootCMS首頁呼叫公司簡介等頻道內容boot
- 爬網入門:JAVA抓取網站網頁內容Java網站網頁
- EVE-NG簡單入門介紹