jQuery中Ajax请求及三级联动

最新推荐文章于 2022-11-27 11:08:33 发布

YourLie_in_April

最新推荐文章于 2022-11-27 11:08:33 发布

阅读量222

点赞数 2

分类专栏： #JavaScript 文章标签： ajax jquery

本文链接：https://blog.csdn.net/YourLie_in_April/article/details/125186544

版权

#JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

ajax写法：

$.ajax({
url:"服务器接口地址",
type:"get 或 post",
data:{
参数1:参数值1,
参数2:参数值2
},
dataType:"json", // JSON.parse()将json对象和数组转换成js字符串
success:function(result){
result //自动获取服务端返回的结果
}
})

发送get请求：

$.get("请求地址","传给后端的数据","回调函数","返回的数据类型")

发送post请求：

$.post("请求地址","传给后端的数据","回调函数","返回的数据类型")

三级联动：

实现层级选择，选中省后才能选取相对的市，选中市后才能选取相对应的县/区

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三级联动</title>
</head>

<body>
    <div id="select_form">
        <select name="" id="province">
            <option>请选择省</option>
        </select>
        <select name="" id="city">
            <option>请选择市</option>
        </select>
        <select name="" id="county">
            <option>请选择县/区</option>
        </select>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        // 三联下拉框数据
        let ArrayData = {
            江苏省: {
                南京市: "鼓楼区，江宁区，雨花区",
                扬州市: "广陵区，江都区，仪征",
                苏州市: "吴中区，新城区，高新区"
            },
            安徽省: {
                蚌埠市: "龙子湖区，新城区，高新区",
                合肥市: "蜀山区，新城区，高新区"
            }
        }
        // 创建数组存储option中的数据
        let arr_option = new Array;
        let i = 0;
        // .each() 遍历
        $('#select_form option').each(function (i) {
            // 遍历所有的option标签，通过下标将内容放在对应的数组下标里
            arr_option[i] = $(this).html();
            i++;
        })

        // 遍历ArrayData 获取数据
        $.each(ArrayData, function (province) {
            // 遍历数组，获取一部分的数据，首先是省份
            // 当id为省的时候，添加下拉框的内容
            $("#province").append("<option>" + province + "</option>")
        })

        // 封装获取下拉框内容方法
        function arr_option_index(obj) {
            // 通过index获取对象索引
            let index = $(obj).index();
            // 通过下标匹配数组中下标，获取相应的内容
            $(obj).html("<option>" + arr_option[index] + "</option>")
        }

        // 当省份发生变化的时候，执行市和县/区
        // change 元素改变时触发
        $('#province').change(function () {
            // 获取市和县/区
            arr_option_index("#city")
            arr_option_index("#county")
            // 获取剩下的内容  市和县/区
            $.each(ArrayData, function (province, content) {
                // 选择省名和相关联的数据
                // selected 选中
                if ($('#province option:selected').text() == province) {
                    $.each(content, function (city, county) {
                        $('#city').append("<option>" + city + "</option>")
                    })
                    $('#city').change(function () {
                        arr_option_index("#county")
                        $.each(content, function (city, county) {
                            if ($('#city option:selected').text() == city) {
                                $.each(county.split("，"), function () {
                                    $('#county').append("<option>" + this +
                                        "</option>")
                                })
                            }
                        })
                    })
                }
            })
        })
    </script>

</body>

</html>

YourLie_in_April

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery中Ajax请求及三级联动

发送get请求：$.get("请求地址","传给后端的数据","回调函数","返回的数据类型")发送post请求：$.post("请求地址","传给后端的数据","回调函数","返回的数据类型")实现层级选择，选中省后才能选取相对的市，选中市后才能选取相对应的县/区...
复制链接

扫一扫