本篇文章給大家?guī)淼膬?nèi)容是關(guān)于php原生上拉加載以及點(diǎn)擊加載更多的實(shí)現(xiàn)方法（代碼示例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

設(shè)計目的

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

設(shè)計原理

通過ajax向后端接口發(fā)起翻頁請求，發(fā)送頁碼，后端接收頁碼，返回json數(shù)據(jù)，前端html' target='_blank'>jquery解析json并且拼接在原有的數(shù)據(jù)基礎(chǔ)上！

代碼

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 點(diǎn)擊加載更多 /div  /body  /html  !--引入jquery庫--  script type= text/javascript src= /uploads/allimg/190504/093A2C91-0.jpg /script  script // 定義一個變量，等會用來控制多次觸發(fā)var i=0;$(window).scroll(function(){ //獲取滾動時距離瀏覽器頂部的值 var t=$(this).scrollTop(); //獲取當(dāng)前窗口的高度 var h=$(this).height(); //獲取按鈕距離瀏覽器頂部的值 var h1=$( #loadmore ).offset().top; //用按鈕的值-滾動條的值與窗口高度進(jìn)行比較，如果小時，則表示按鈕進(jìn)入可視區(qū)，同時也表示滾動條即將到達(dá)底部 if(h1-t h){ //防止快速下拉時多次觸發(fā) if(i==0){ //改變i的值 i=1; //觸發(fā)點(diǎn)擊事件 $( #loadmore ).click();// 加載初始數(shù)據(jù)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 +服務(wù)器錯誤+ /p  beforeSend:function(data){ $( #loading ).append( 加載中  /script 

server.php

 ?phpheader( Content-type:application/json header( Access-Control-Allow-Origin:* // 連接數(shù)據(jù)庫$con = mysql_connect( 數(shù)據(jù)庫地址 , 數(shù)據(jù)庫賬號 , 數(shù)據(jù)庫密碼 if (!$con){die( Could not connect: . mysql_error());}mysql_select_db( 數(shù)據(jù)庫名 , $con);mysql_query( SET NAMES UTF8 // 每頁顯示條數(shù)$pageLine = 5;// 計算總記錄數(shù)$ZongPage = mysql_query( select count(*) from 表名 // 計算總頁數(shù)$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/ :/ 沒有了/ }] // 關(guān)閉數(shù)據(jù)庫連接mysql_close($con);? 

以上就是php原生上拉加載以及點(diǎn)擊加載更多的實(shí)現(xiàn)方法（代碼示例）的詳細(xì)內(nèi)容，PHP教程

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