一個網站的數據很是多的時候,須要分頁,方便瀏覽,爲了方便翻頁,那麼咱們摒棄傳統的點擊翻頁,直接往下拉,不停地自動加載數據,這樣就能夠方便閱讀。javascript
經過ajax向後端接口發起翻頁請求,發送頁碼,後端接收頁碼,返回json數據,前端jquery解析json而且拼接在原有的數據基礎上!php
index.htmlhtml
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <title>jquery+ajax上拉加載更多</title> <style> *{margin:0;padding: 0;} #text p{ width: 80%; padding: 5px 5px; background: #eee; margin:5px auto; } #loadmore{ width: 120px; background: #eee; height: 45px; border-radius: 100px; margin:20px auto; line-height: 45px; text-align: center; cursor: pointer; } #loading{ text-align: center; } </style> </head> <body> <h3 id="loading"></h3> <div id="text"></div> <div id="loadmore">點擊加載更多</div> </body> </html> <!--引入jquery庫--> <script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script> <script> // 定義一個變量,等會用來控制屢次觸發 var i=0; $(window).scroll(function(){ //獲取滾動時距離瀏覽器頂部的值 var t=$(this).scrollTop(); //獲取當前窗口的高度 var h=$(this).height(); //獲取按鈕距離瀏覽器頂部的值 var h1=$('#loadmore').offset().top; //用按鈕的值-滾動條的值與窗口高度進行比較,若是小時,則表示按鈕進入可視區,同時也表示滾動條即將到達底部 if(h1-t<h){ //防止快速下拉時屢次觸發 if(i==0){ //改變i的值 i=1; //觸發點擊事件 $('#loadmore').click(); } } }); // 加載初始數據 var p = 1; $.ajax({ type:"get", url:'server.php?page=' + p, data:{}, dataType:"json", success:function(data){ for (var a in data){ $('#text').append("<p>"+data[a].resname+"</p>"); $("#loading").remove(); } i=0; }, error:function(data){ }, beforeSend:function(data){ $('#loading').append("加載中"); } }); // 加載更多 $('#loadmore').click(function(){ p++; $.ajax({ type:"get", url:'server.php?page=' + p, data:{}, dataType:"json", success:function(data){ for (var a in data){ $('#text').append("<p>"+data[a].resname+"</p>"); $("#loading").remove(); } i=0; }, error:function(data){ $('#text').append("<p>"+服務器錯誤+"</p>"); }, beforeSend:function(data){ $('#loading').append("加載中"); } }); }); </script>
server.php前端
<?php header("Content-type:application/json"); header('Access-Control-Allow-Origin:*'); // 鏈接數據庫 $con = mysql_connect("數據庫地址","數據庫帳號","數據庫密碼"); if (!$con){die('Could not connect: ' . mysql_error());} mysql_select_db("數據庫名", $con); mysql_query("SET NAMES UTF8"); // 每頁顯示條數 $pageLine = 5; // 計算總記錄數 $ZongPage = mysql_query("select count(*) from 表名"); // 計算總頁數 $sum = mysql_fetch_row($ZongPage); $pageCount = ceil($sum[0]/$pageLine); // 定義頁碼變量 @$tmp = $_GET['page']; // 計算分頁起始值 $num = ($tmp - 1) * $pageLine; // 查詢語句 $result = mysql_query("SELECT 字段 FROM 表名 ORDER BY id DESC LIMIT " . $num . ",$pageLine"); //遍歷輸出 $results = array(); while ($row = mysql_fetch_assoc($result)) { $results[] = $row; } echo json_encode($results); //分頁按鈕 //上一頁 $lastpage = $tmp-1; //下一頁 $nextpage = $tmp+1; //防止翻過界 if (@$tmp > $pageCount) { echo "[{\"result\":\"沒有了\"}]"; } // 關閉數據庫鏈接 mysql_close($con); ?>
DEMO:戳這裏
做者:TANKING
學習交流微信:face6009
網站:likeyunba.comjava