ajax的三级联动

最新推荐文章于 2024-07-21 17:13:47 发布

很帅的程程

最新推荐文章于 2024-07-21 17:13:47 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签： jquery ajax

本文链接：https://blog.csdn.net/qq_42289636/article/details/105983711

版权

前端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

1.利用jQuery的ajax的三级联动，获取数据库中的省市区
前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.0.js"></script>
</head>
<body>
<h3 align="center">将三级联动使用jquery的ajax方式实现</h3>
<div align="center">
    省份:<select id="province">
    <option value="">请选择省份</option>
</select>
    城市:<select id="city">
    <option value="">请选择城市</option>
</select>
    地区:<select id="district">
    <option>请选择地区</option>
</select>
</div>


</body>
<script>
    var province = $('#province');
    var city = $('#city');
    var district = $('#district');

    $.ajax({
        url:'http://localhost:8080/cascade',//地址
        data:{method:'getProvince'},//无论是get或者post请求，都使用data定义请求参数
        dataType:'json',//表示服务端返回的数据类型
        type:'get',// 表示请求的方式 get post, 大小写不敏感
        //表示服务器端成功返回数据, 会自动的触发function(){}方法调用， function方法的参数是成功之后返回的数据
        // _data是已经处理好的标准的json数据，不要去调用 JSON.parse(), 底层以及处理好了
        success:function (_data) {
            // console.log(_data);
            // 对于获取省份来讲 _data数据是： [{}, {}, {}]
            // provinceData(_data);
            for (var i = 0; i <_data.length ; i++) {
                var pro = _data[i];//取到每一个省份的数据
                province.append('<option value="'+pro.id+'">'+pro.name+'</option>');

                // console.log(pro.id);
            }
        }

    });

    province.change(function () {
        $('#city option:gt(0)').remove();
        $('#district option:gt(0)').remove();
        city
        $.ajax({
            url:'http://localhost:8080/cascade?method=getCity&provinceId='+this.value,
            // data:{method:'getProvince'+this.value},
            dataType:'json',
            type:'get',
            success:function(_data){
                for (var i = 0; i <_data.length ; i++) {
                    var citys = _data[i];//取到每一个省份的数据
                    city.append('<option value="'+citys.id+'">'+citys.name+'</option>');

                    console.log(citys.id+citys.name);
                }
            }
        })
    });

    city.change(function () {
        $('#district option:gt(0)').remove();
        $.ajax({
            url:'http://localhost:8080/cascade?method=getDistrict&cityId='+this.value,
            dataType:'json',
            type:'get',
            success:function (_data) {
                for (var i = 0; i <_data.length ; i++) {
                    var districts = _data[i];
                    district.append('<option value="'+districts.id+'">'+districts.name+'</option>');
                    console.log(districts.id+districts.name);
                }
            }
        })
    })

    

</script>
</html>

很帅的程程

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
ajax的三级联动

1.利用jQuery的ajax的三级联动，获取数据库中的省市区前端代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3....
复制链接

扫一扫

专栏目录