200字范文 > Ajax+MySQL+PHP+jQuery实现异步请求页面并显示数据

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

时间：2021-10-18 06:12:33

完整效果图:

思路

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%;}

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="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、和flagvar 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="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="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);}})})

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();}?>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。