php原生上拉載入,點選載入更多(jQuery,ajax,mysql)
設計目的
一個網站的資料非常多的時候,需要分頁,方便瀏覽,為了方便翻頁,那麼我們摒棄傳統的點選翻頁,直接往下拉,不停地自動載入資料,這樣就可以方便閱讀。
設計原理
通過ajax向後端介面發起翻頁請求,傳送頁碼,後端接收頁碼,返回json資料,前端jquery解析json並且拼接在原有的資料基礎上!
程式碼
index.html
<!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
微信:likeyunba520