Ajax+jQuery+MySQL+PHP实现瀑布流动态刷新商品

键.

于 2021-09-07 20:24:10 发布

阅读量508

点赞数 2

分类专栏： ajax js 前端特效文章标签： php ajax mysql

本文链接：https://blog.csdn.net/beekim/article/details/120162507

版权

js 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

前端特效

3 篇文章 0 订阅

订阅专栏

ajax

2 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用PHP和MySQL构建一个动态瀑布流加载系统。首先讲解了PHP和MySQL的基础语法，然后通过PHP插入数据到MySQL数据库。接着，展示了如何使用Ajax获取数据库中的数据，并将其渲染到前端瀑布流布局中。在前端部分，利用jQuery监听滚动事件，当滚动到页面底部时动态加载更多数据。最后，解决了快速滚动时可能出现的数据加载异常问题，确保了流畅的用户体验。

摘要由CSDN通过智能技术生成

1，PHP、MySQL入门

关于PHP的基础语法可以参照：PHP入门语法
关于MySQL的基础语法可以参照：MySQL入门语法

2，效果演示

思路：
1，后端数据准备：MySQL+PHP
2，编写前端瀑布流布局
3，前端通过Ajax拿到后端数据
4，将拿到的数据写在界面上
5，监听滚动条滚动并在边界值上刷新新数据
6，动态刷新所有数据

【注】：所有的代码均放在WampServer的www目录下，通过localhost访问

3，编码

项目目录结构：
在这里插入图片描述

3.1，MySQL+PHP数据准备

<?php
    //创建数据库连接
    $dsn="mysql:host=localhost;dbname=h5";
    //创建PDO
    $pdo=new PDO($dsn,'root','');
    //设置字符集
    $pdo->exec('set names utf8');
    //编写sql语句，?表示占位符
    $res=$pdo->prepare("INSERT INTO falls(path) VALUE(?)");
    //循环执行sql语句，将准备好的数据存入数据库
    for($i=1;$i<=93;$i++){
        $res->execute(array("imgs/".$i.".jpg"));
    }
?>

在WampServer中执行上述代码后查询数据库：
在这里插入图片描述
PHP连接MySQL数据库并拿到该表的数据：

<?php
	$dsn="mysql:host=localhost;dbname=h5";
	$pdo=new PDO($dsn,'root','');
	$pdo->exec('set names utf8');
	
	$res=$pdo->prepare("SELECT * FROM falls limit 0,20 ");
	
	$res->execute();
	
	$data=$res->fetchAll();
	echo json_encode($data);

?>

界面上输出为：
在这里插入图片描述
上述操作后，后端的准备就初步做好了，接下来进行前端界面的编写。

3.2，Ajax+前端界面编码

1.首先我们需要在前端编写好瀑布流的布局

在这里插入图片描述

<div class="box">
  <ul>
      <li>
          <img src="imgs/1.jpg" alt="">
          <div>1</div>
      </li>
      <li>
          <img src="imgs/2.jpg" alt="">
          <div>2</div>
      </li>
  </ul>
   <ul>
      <li>
          <img src="imgs/3.jpg" alt="">
          <div>3</div>
      </li>
      <li>
          <img src="imgs/4.jpg" alt="">
          <div>4</div>
      </li>
  </ul>
    <ul>
      <li>
          <img src="imgs/5.jpg" alt="">
          <div>5</div>
      </li>
      <li>
          <img src="imgs/6.jpg" alt="">
          <div>6</div>
      </li>
  </ul>
    <ul>
      <li>
          <img src="imgs/7.jpg" alt="">
          <div>7</div>
      </li>
      <li>
          <img src="imgs/8.jpg" alt="">
          <div>8</div>
      </li>
  </ul>
      <ul>
      <li>
          <img src="imgs/9.jpg" alt="">
          <div>9</div>
      </li>
      <li>
          <img src="imgs/10.jpg" alt="">
          <div>10</div>
      </li>
  </ul>
</div>

*{
  padding: 0;
  margin: 0;
}
ul{
  list-style: none;
}
.box{
  display: flex;
  border: 1px solid red;
  flex-wrap: wrap;
  width: 1200px;
  margin: 0 auto;
  justify-content: space-evenly; 
}
.box ul li{
  border: 3px solid rgb(15, 15, 15);
  margin: 5px 0;
}
.box ul li img{
  display: block;
}
.box ul li div{
  background-color: rgb(105, 168, 228);
  font-size: 18px;
  text-align: center;
}

2.通过Ajax从数据库中获取到数据

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
  //从后端拿到数据
  $.ajax({
      url:'show.php',
      type:'get',
      data:{
      },
      success:function(data){
          var showdata =JSON.parse(data)
          console.log(showdata)   
      }
  })
})

在这里插入图片描述

3.将拿到的数据写在界面上

第2步操作，我们拿到了数据库的数据，现在需要将这些数据写在界面上：
css不变，修改html代码：

<div class="box">
   <ul></ul>
   <ul></ul>
   <ul></ul>
   <ul></ul>
   <ul></ul>
</div>

jQuery写数据到界面上：

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
   //从后端拿到数据
   $.ajax({
       url:'show.php',
       type:'get',
       data:{
       },
       success:function(data){
           var showdata =JSON.parse(data)
           for(var i=0;i<showdata.length;i++){
               $('.box ul').eq(i%5).append("<li><img src="+showdata[i].path+"><div>"+showdata[i].id+"</div></li>")     
           }   
       }
   })
})
</script>

在这里插入图片描述

4.判断滚动条滚动到边界值时刷新数据

这里需要计算一下来找到边界值：整个文档的高度1-滚动条卷曲的高度2=当前显示的文档高度。而这个值一般设置为1000左右即可。

在这里插入图片描述

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
  function run(){
       //从后端拿到数据
       $.ajax({
           url:'show.php',
           type:'get',
           data:{
           },
           success:function(data){
               var showdata =JSON.parse(data)
               for(var i=0;i<showdata.length;i++){
                   $('.box ul').eq(i%5).append("<li><img src="+showdata[i].path+"><div>"+showdata[i].id+"</div></li>")
               }   
           }
       })
  }

  //页面载入时执行一次
  run()
  //监听滚动边界值
  $(document).scroll(function(){
       if($(document).height()-$(document).scrollTop()<1000){
           run()
       }
   })
})
</script>

此时效果：

5.动态刷新其他数据

通过前面4步，已经可以动态刷新出图片了，但是现在刷新的只是重复的数据，我们需要修改部分代码来动态刷新出新的数据。

<?php
//接收前端Ajax，data字段传的参数
$page=$_GET['pageshow'];
$num=$_GET['numshow'];
//计算页码，分页公式：（pagenum-1）*每页显示的条数
$start=$page*$num;

$dsn="mysql:host=localhost;dbname=h5";
$pdo=new PDO($dsn,'root','');
$pdo->exec('set names utf8');

$res=$pdo->prepare("SELECT * FROM falls limit ${start},${num} ");

$res->execute();

$data=$res->fetchAll();
echo json_encode($data);
?>

在MySQL中使用 limit(start,num) 进行分页的公式为：
start=（pagenum-1）×每页显示的条数
由于本次案例中，我们从数据库中获取的数据转换成json对象后，数据的下标是从0开始的，所以在实际使用中不用减1。

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
  //全局变量页码和数量
  var page=0;
  var num=20;

  function run(page,num){
      //从后端拿到数据
      $.ajax({
          url:'show.php',
          type:'get',
          data:{
              pageshow:page,
              numshow:num
          },
          success:function(data){
              var showdata =JSON.parse(data)
              for(var i=0;i<showdata.length;i++){
                  $('.box ul').eq(i%5).append("<li><img src="+showdata[i].path+"><div>"+showdata[i].id+"</div></li>")
              }   
          }
      })
 }

 //页面载入时执行一次
 run(page,num)
 //监听滚动
 $(document).scroll(function(){
      if($(document).height()-$(document).scrollTop()<1000){
          page++
          console.log(page)
          run(page,num)
      }
  })
})
</script>

通过步骤5，我们要的最终效果已经出来了，但是还是有一个BUG：
当我们缓慢滚动滚轮时，页码刷新是一页一页的，当我们滚动滚轮比较快时，就会出现页面是一下加好几页的。
出现这个bug的原因：
Ajax是异步加载的，JS中Ajax部分代码还没执行完的时候，滚动条滚动的事件函数监听到好几次滚动事件产生，所以就直接给page值++了。

6，解决BUG

设置标志位flag

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
  //全局变量页码和数量
  var page=0;
  var num=20;

  //设置标志位解决异步加载出现的显示BUG
  var flag=true;

  function run(page,num){
      //从后端拿到数据
      $.ajax({
          url:'show.php',
          type:'get',
          data:{
              pageshow:page,
              numshow:num
          },
          success:function(data){
              var showdata =JSON.parse(data)
              for(var i=0;i<showdata.length;i++){
                  $('.box ul').eq(i%5).append("<li><img src="+showdata[i].path+"><div>"+showdata[i].id+"</div></li>")
                  //Ajax获取数据完成后才重置标志位
                  flag=true;
              }   
          }
      })
 }

 //页面载入时执行一次
 run(page,num)
 //监听滚动
 $(document).scroll(function(){
      if($(document).height()-$(document).scrollTop()<1000){
          if(flag){
              page++
              flag=false
          }
          console.log(page)
          run(page,num)
      }
  })
})
</script>