jQuery发送AJAX请求

案例：
一、 创建一个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>