本篇文章給大家帶來的內容是關于php原生上拉加載以及點擊加載更多的實現方法（代碼示例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

設計目的

一個網站的數據非常多的時候，需要分頁，方便瀏覽，為了方便翻頁，那么我們摒棄傳統的點擊翻頁，直接往下拉，不停地自動加載數據，這樣就可以方便閱讀。

設計原理

通過ajax向后端接口發起翻頁請求，發送頁碼，后端接收頁碼，返回json數據，前端html' target='_blank'>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= /uploads/allimg/190504/093A2C91-0.jpg /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

 ?phpheader( 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 
// 查詢語句$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);? 

以上就是php原生上拉加載以及點擊加載更多的實現方法（代碼示例）的詳細內容，PHP教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。