案例：
一、 创建一个huimaiche.sql
#设置编码
SET NAMES UTF8;
#如果存在huimaiche数据库就删除
DROP DATABASE IF EXISTS huimaiche;
#创建huimaiche
CREATE DATABASE huimaiche CHARSET UTF8;
#使用huimaiche数据库
USE huimaiche;
#创建一个car表
CREATE TABLE car(
cid INT PRIMARY KEY AUTO_INCREMENT,
cname VARCHAR(16),
count INT,
pic VARCHAR(32),
type VARCHAR(1024)
);
#插入数据
INSERT INTO car VALUES(NULL,'奥迪 A4L','492','img/30_1.jpg','lt8');
INSERT INTO car VALUES(NULL,'本田XR-V','410','img/30_2.jpg','lt8');
INSERT INTO car VALUES(NULL,'轩逸','406','img/8_1.jpg','lt8');
INSERT INTO car VALUES(NULL,'宝来','399','img/15_2.jpg','mt8');
INSERT INTO car VALUES(NULL,'MISTRA名图','370','img/8_3.jpg','mt8');
INSERT INTO car VALUES(NULL,'传祺G S4','359','img/15_1.jpg','mt8');
INSERT INTO car VALUES(NULL,'SUV1','492','img/suv_1.jpg','suv');
INSERT INTO car VALUES(NULL,'SUV2','492','img/suv_2.jpg','suv');
INSERT INTO car VALUES(NULL,'SUV3','492','img/suv_3.jpg','suv');
#查询表
SELECT * FROM car;
二、创建一个car_select.bytype.php
<?php
//设置响应消息头部
header('Content-Type:application/json;charset=UTF8');
$type=$_REQUEST['type'];$conn=mysqli_connect('127.0.0.1','root','','huimaiche',3306);
$sql="SET NAMES UTF8";
mysqli_query($conn,$sql);
$sql="SELECT * FROM car WHERE type='$type'";
$result=mysqli_query($conn,$sql);
$list=mysqli_fetch_all($result,MYSQLI_ASSOC);
// var_dump($list);
//把输出的List转换为json格式
echo json_encode($list);
三、创建一个car_select.html
css样式：
<style type="text/css">
*{
margin:0;
padding:0;
box-sizing: border-box;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
.container{
width:1024px;
margin:0 auto;
border:1px solid #000;
}
.tit{
overflow: hidden;
height:40px;
line-height: 40px;
}
.tit>li{
float:left;
width:33%;
text-align: center;
}
.car_list{
overflow: hidden;
}
.car_list>li{
float:left;
width:33.33%;
border:1px solid #000;
padding:5px;
}
.car_list>li>p>span{
color:orange;
}
</style>
body部分：
<div class="container">
<ul class="tit">
<li><a href="lt8">lt8</a></li>
<li><a href="mt8">mt8</a></li>
<li><a href="suv">suv</a></li>
</ul>
<ul class="car_list">
<!-- <li>
<h3>奥迪</h3>
<p> 有
<span>492</span>
人正在买</p>
<img src="./img/30_1.jpg">
</li> -->
</ul>
</div>
javaScript部分：
//引入jQuery文件
<script src="./js/jquery.min.js"></script>
<script type="text/javascript">
// 点击不同的车辆类别显示相应的汽车
$('.tit').on('click','a',function(e){
// 取消a标签的默认行为
e.preventDefault();
// 获取车辆类别
var type=$(this).attr('href');
// ajax请求
$.ajax({
type:'GET',
url:"car_select_bytype.php",
data:{"type":type},
success:function(all,msg,xhr){
var html='';
for(var i=0;i<all.length;i++){
console.log(all[i]);
var c=all[i];
html+=`
<li>
<h3>${c.cname}</h3>
<p>有 <span>${c.count}</span>人正在买</p>
<img src="${c.pic}">
</li>
`;
}
$('.car_list').html(html);
}
})
})
</script>
