利用mysql查询总数据条数,再php处理数据转出数组,生成随机返回到页面,可以做成刷新页面,出现不同的内容
create table hxfimported( pid int primary key auto_increment, pic varchar(64), pname varchar(32), price float(10,2) ); insert into hxfimported values (null,"img/imported-6.jpg","越南白心火龙果 ","41.9"), (null,"img/imported-1.jpg","泰国金枕头榴莲","118.0"), (null,"img/imported-3.jpg","澳洲混合桉树蜂蜜","99.0"), (null,"img/imported-4.jpg","马来西亚白咖啡","65.00"), (null,"img/imported-2.jpg","爱伦蒂全脂纯牛奶","65.00"), (null,"img/imported-39.jpg","西班牙特级橄榄油","65.00"), (null,"img/imported-12.jpg","越南白心火龙果 ","41.9"), (null,"img/imported-13.jpg","马来西亚白咖啡 ","41.9"), (null,"img/imported-19.jpg","澳洲混合桉树蜂蜜 ","41.9"), (null,"img/imported-7.jpg","泰国金枕头榴莲 ","41.9"), (null,"img/imported-3.jpg","越南白心火龙果 ","41.9"), (null,"img/imported-15.jpg","爱伦蒂全脂纯牛奶 ","41.9"), (null,"img/imported-2.jpg","西班牙特级橄榄油 ","41.9"), (null,"img/imported-17.jpg","越南白心火龙果 ","41.9");
<?php $conn=mysqli_connect("127.0.0.1","root","","hxf"); $sql="set names utf8"; mysqli_query($conn,$sql); $sql="select count(1) as number from hxfimported"; $result=mysqli_query($conn,$sql); $data = mysqli_fetch_array($result); $count = $data['number']; $len=rand(0,$count-6); $sql="select pic,pname,price from hxfimported limit $len,6"; $result=mysqli_query($conn,$sql); $list=array(); if($result==false){ echo "$len"; }else{ while(($row=mysqli_fetch_assoc($result))!=null){ $list[]=$row; } } echo json_encode($list); ?>
<div class="imported-food common"> <div class="weui-panel weui-panel_access"> <a href="importedFoods.html"> <div class="weui-panel__hd"><p class="item-title">进口食品<span class="weui-cell-ft"></span></p></div> <div class="weui-panel__bd"> <div class="weui-media-box weui-media-box_text"> <p class="weui-media-box__desc"><img src="img/imported-food-header.jpg" alt="" /></p> </div> </div> </a> <div class="weui-grids"> </div> </div> </div>
$.getJSON("hxfimported.php",{},function(data){ var _html=""; $.each(data,function(i,item){ _html+=`<a href="local-${i+1}.html" class="weui-grid"> <div class="weui-grid__icon"> <img src="${item.pic}" alt=""> </div> <p class="weui-grid__label">${item.pname}</p> <p class="weui-grid__price">¥${item.price}</p> </a>` }) $('.imported-food .weui-grids').append(_html); });