完整效果图:

思路

1.先写insert.php插入数据（这里插入的93条）

<?php// 解决乱码header('content-type:text/html;charset=utf8');try{// 1.设置数据库连接$dsn="mysql:host=localhost;dbname=tx";// 2.创建PDO 生成数据库连接$pdo=new PDO($dsn,'root','');// 3.设置字符集$pdo->exec("set names utf8");// 4.准备插入语句$inse=$pdo->prepare("INSERT INTO pubu(path) VALUE(?)");// 5.执行sql语句//插入93条for($i=1;$i<=93;$i++){$inse->execute(array($i.'.jpg'));}}catch(Exception $e){echo $e.getMessage();}?>

2.再写select.php查询数据（这里先查询20条）

<?php// 解决乱码header('content-type:text/html;charset=utf8');try{// 1.设置数据库连接$dsn="mysql:host=localhost;dbname=tx";// 2.创建PDO 生成数据库连接$pdo=new PDO($dsn,'root','');// 3.设置字符集$pdo->exec("set names utf8");// 4.查询语句 先查20条$sele=$pdo->prepare("SELECT path FROM pubu limit 0,20");// 5.执行sql语句$sele->execute();// 6.查询的语句解析结果集$data=$sele->fetchAll();// 7.输出echo json_encode($data);}catch(Exception $e){echo $e.getMessage();}
?>

3.瀑布布局

每个li设置等宽，然后一个li为一整列，li不设置高度，img设置width:100%

         .box{width: 100%;}.wrap{width: 1000px;margin: 0 auto;}ul{list-style: none;margin:0 auto;display: flex;}li{//设置等宽width: 300px;}li>img{width: 100%;}

<div class="box"><div class="wrap"><ul><li><img src="data:images/1.jpg"><div>1</div><img src="data:images/5.jpg"><div>5</div><img src="data:images/9.jpg"><div>9</div><img src="data:images/13.jpg"><div>13</div><img src="data:images/17.jpg"><div>17</div></li><li><img src="data:images/2.jpg"><div>2</div><img src="data:images/6.jpg"><div>6</div><img src="data:images/10.jpg"><div>10</div><img src="data:images/14.jpg"><div>14</div><img src="data:images/18.jpg"><div>18</div></li><li><img src="data:images/3.jpg"><div>3</div><img src="data:images/7.jpg"><div>7</div><img src="data:images/11.jpg"><div>11</div><img src="data:images/15.jpg"><div>15</div><img src="data:images/19.jpg"><div>19</div></li><li><img src="data:images/4.jpg"><div>4</div><img src="data:images/8.jpg"><div>8</div><img src="data:images/12.jpg"><div>12</div><img src="data:images/16.jpg"><div>16</div><img src="data:images/20.jpg"><div>20</div></li></ul></div></div>

20张瀑布布局效果图

4.第一次请求，把li里面的内容删除，用ajax请求先动态添加20条数据相当于请求第一页

console.log(i%4)==0,1,2,3 0,1,2,3…所以能实现第一个li添加1.jpg,5.jpg…

for(var i=0;i<imgs.length;i++){$('ul li').eq(i%4).append('<img src="data:images/'+imgs[i].path+'"><div>'+imgs[i].+'</div>')}

5.当滚动条滚到底部后再次请求数据(相当于请求第2，3，4…页)

1.**页面滚动事件监听**
$(window).scroll(function(){})

$(window).scroll(function(){// 滚动到底部 整个页面的高度-卷去的高度<当前屏幕的高度(这里是假设1000)if($(document).height()-$(document).scrollTop()<1000&&flag){// 设置flag为falseflag=false;// pagenum加一pagenum++;console.log(pagenum)getData(pagenum,num);}})

2.判断滚到底部:
整个页面的高度-卷去的高度<当前屏幕的高度(这里是假设1000)
(document).height()−(document).height()-(document).height()−(document).scrollTop()<1000

if($(document).height()-$(document).scrollTop()<1000)

3.滚到底部请求数据库
注意:1.由于两次用到请求，所以封装起来,由于需要查后面的值，所以需要写形参，传入第几页和请求的条数，所以需要定义全局变量pagenum和num；再滚到底部后，pagenum++,并且前端把它和num放在data传给后端,后端用POST([′pagenum′])和_POST(['pagenum'])和POST([′pagenum′])和_POST([‘num’])；后端拿到后传入limit后面，然后前端把值拿到再次动态创建并显示在页面上

// 定义当前页面pagenum、每次请求的条数num、和flag
var pagenum=0;
var num=20;//封装的函数
function getData(pagenum,num){$.ajax({url:'select.php',type:'post',data:{// 传给后端page:pagenum,shuliang:num},success:function(data){var imgs=JSON.parse(data)console.log(imgs)// 1.给每个li添加内容,取余判断第几个lifor(i=0;i<imgs.length;i++){$('ul li').eq(i%4).append('<img src="data:images/'+imgs[i].path+'"><div>'+imgs[i].id+'</div>')}// 恢复flagflag=true;},error:function(err){console.error(err)}})
}// 2.页面滚动监听
$(window).scroll(function(){// 滚动到底部    整个页面的高度-卷去的高度<当前屏幕的高度(这里是假设1000)if($(document).height()-$(document).scrollTop()<1000&&flag){// 设置flag为falseflag=false;// pagenum加一pagenum++;console.log(pagenum)getData(pagenum,num);}
})

更改select.php

$pagenum=$_POST['page'];
$num=$_POST['shuliang'];
$start=$pagenum*$num;
$sele=$pdo->prepare("SELECT * FROM pubu limit ${start},${num}");

4.这里有个BUG就是每次滚动页面，i会多加几次，所以需要定义全局flag=true,滚一次就令flag=false;在需要加载的内容加载好了再令flag=true;

总结：整个过程就是先用insert.php插入值，然后用select.php查询值，前端请求select.php查询到的值，请求又分为两步：
第一步：刚刚开始需要请求一些数据
第二步：滚动条滚到最后需要请求
在第二步中需要在次请求，所以需要前端需要在data里面传入第几页和数据条数，然后后端拿到值过后传给limit，最后前端把这个值拿到并且显示在页面上

前端传值放在data

后端获取值用$_GET[’’]

limit里面写值: ${变量名}

6.完整代码

         .box{width: 100%;}.wrap{width: 1000px;margin: 0 auto;}ul{list-style: none;margin:0 auto;display: flex;}li{width: 300px;}li>div{width: 100%;background: #ff00ff;text-align: center;}li>img{width: 100%;display: block;}

         $(function(){// 定义当前页面pagenum、每次请求的条数num、和flagvar pagenum=0;var num=20;var flag=true;//控制再滚动一次鼠标后i不能执行// 封装请求的ajaxfunction getData(pagenum,num){$.ajax({url:'select.php',type:'post',data:{// 传给后端page:pagenum,shuliang:num},success:function(data){var imgs=JSON.parse(data)console.log(imgs)// 1.给每个li添加内容,取余判断第几个lifor(i=0;i<imgs.length;i++){$('ul li').eq(i%4).append('<img src="data:images/'+imgs[i].path+'"><div>'+imgs[i].id+'</div>')}// 恢复flagflag=true;},error:function(err){console.error(err)}})}// 1.第一次请求getData(0,20);// 2.页面滚动监听$(window).scroll(function(){// 滚动到底部   整个页面的高度-卷去的高度<当前屏幕的高度(这里是假设1000)if($(document).height()-$(document).scrollTop()<1000&&flag){// 设置flag为falseflag=false;// pagenum加一pagenum++;console.log(pagenum)getData(pagenum,num);}})})

     <div class="box"><div class="wrap"><ul><li><!-- <img src="data:images/1.jpg"><div>1</div><img src="data:images/5.jpg"><div>5</div><img src="data:images/9.jpg"><div>9</div><img src="data:images/13.jpg"><div>13</div><img src="data:images/17.jpg"><div>17</div> --></li><li><!-- <img src="data:images/2.jpg"><div>2</div><img src="data:images/6.jpg"><div>6</div><img src="data:images/10.jpg"><div>10</div><img src="data:images/14.jpg"><div>14</div><img src="data:images/18.jpg"><div>18</div> --></li><li><!-- <img src="data:images/3.jpg"><div>3</div><img src="data:images/7.jpg"><div>7</div><img src="data:images/11.jpg"><div>11</div><img src="data:images/15.jpg"><div>15</div><img src="data:images/19.jpg"><div>19</div> --></li><li><!-- <img src="data:images/4.jpg"><div>4</div><img src="data:images/8.jpg"><div>8</div><img src="data:images/12.jpg"><div>12</div><img src="data:images/16.jpg"><div>16</div><img src="data:images/20.jpg"><div>20</div> --></li></ul></div></div>

select.php

<?php// 解决乱码header('content-type:text/html;charset=utf8');// 定义接收前端请求的page,num$pagenum=$_POST['page'];$num=$_POST['shuliang'];$start=$pagenum*$num;try{// 1.设置数据库连接$dsn="mysql:host=localhost;dbname=tx";// 2.创建PDO 生成数据库连接$pdo=new PDO($dsn,'root','');// 3.设置字符集$pdo->exec("set names utf8");// 4.查询语句$sele=$pdo->prepare("SELECT * FROM pubu limit ${start},${num}");// 5.执行sql语句$sele->execute();// 6.查询的语句解析结果集$data=$sele->fetchAll();// 7.输出echo json_encode($data);}catch(Exception $e){echo $e.getMessage();}?>

insert.php

<?php// 解决乱码header('content-type:text/html;charset=utf8');try{// 1.设置数据库连接$dsn="mysql:host=localhost;dbname=tx";// 2.创建PDO 生成数据库连接$pdo=new PDO($dsn,'root','');// 3.设置字符集$pdo->exec("set names utf8");// 4.准备插入语句$inse=$pdo->prepare("INSERT INTO pubu(path) VALUE(?)");// 5.执行sql语句for($i=1;$i<=93;$i++){$inse->execute(array($i.'.jpg'));}}catch(Exception $e){echo $e.getMessage();}?>

Ajax+MySQL+PHP+jQuery实现异步请求页面并显示数据相关推荐

jquery的ajax异步请求接收返回json数据
jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以.这篇文 ...
layui table数据表格中数据返回成功，但页面不显示数据内容问题
layui table数据表格中数据返回成功,但页面不显示数据内容问题. 这是我做毕业设计的时候自己遇到的问题,后来查看了网上的一些技术贴子而得到解决,所以便想总结一个大概的方法,供大家参考! 一般导 ...
datagrid数据表格当数据为0的时候页面不显示数据
如下图: datagrid数据表格当数据为0的时候页面不显示数据,为空的表格数据全是0,但是页面无法显示传递的json数据也是没问题的: 所以实在想不通,为什么easyUI datagrid 不显示 ...
angluar ajax实例,Angular服务Request异步请求的实例讲解
首先这里我简单写个例子来方便您的理解 var request = { post: function() { var errorCallback = { error: function(f) { thi ...
RTSP视频安防智能监控系统EasyNVR配置完成后登录web页面不显示数据是什么问题？
EasyNVR视频安防智能监控系统可以说是一款极为轻便的视频安防监控系统,部署在服务器且进行简单配置后即可直接使用,无需自建服务器即可实现网页无插件直播. 正常情况下EasyNVR配置完成后只需通过I ...
repeater 控件ajax绑定数据源,用 DataList 和 Repeater 控件显示数据（C#） | Microsoft Docs...
使用 DataList 和 Repeater 控件显示数据 (C#) 09/13/2006 本文内容在前面的教程中,我们使用了 GridView 控件来显示数据. 从本教程开始,我们将介绍如何生成包 ...
promise将ajax变为同步,ES6-Promise改造异步请求为同步
1.扩展:ajax 1.1 代码如下 $.ajax({ url:'地址', type:'get/post', data:{}, dataType:'json/jsonp', success:funct ...
JSP页面分页显示数据
一.源代码(这里以一个Java web的留言板项目为例): 1.Dao层操作数据库的方法(MessageDao.java) 设置每页显示的最大留言条数: private final int MAX_S ...
jsp页面用c标签来循环遍历数据库某表中里面的数据但是页面不显示数据
控制台也不报错,页面也不显示? 遇到这个情况,第一看jsp页面的c标签写的是否符合正规我的jsp页面的c标签代码如下: c标签循环遍历的规范 1.有导入c标签库 <%@taglib uri= ...

Ajax+MySQL+PHP+jQuery实现异步请求页面并显示数据