php原生上拉加载以及点击加载更多的实现方法（

本篇文章给大家带来的内容是关于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教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。