ajax+json经典综合案例--省市区街道地址选择

最新推荐文章于 2024-04-25 12:40:13 发布
最新推荐文章于 2024-04-25 12:40:13 发布
阅读量637 收藏
点赞数
分类专栏： ajax+json 文章标签： 省市区街道地址 省市区三级联动 省市联动 省市区街道地址动态加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42133396/article/details/102627280
版权

目录

纯jquery方式实现，地址数据来源与苏宁接口

select2插件方式实现，地址数据来源与苏宁接口 

纯jquery方式实现，地址数据来源与苏宁接口

首选需要选择省份

当为直辖市时，市不用选择会自动加载，并置灰不可改变。当街道为全区时，处于不可选状态。如下图所示 

当市下面的区唯一时，选择市后，区自动加载，并置灰。如下图所示

完整代码如下 ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>address</title>
    <script src="./js/jquery-3.3.1.js"></script>
    <style>
        select {
            width: 200px;
            height: 30px;
            border: 1px solid green;
        }
    </style>
</head>
<body>
<div class="container">
    <div><h3>请完善地址信息</h3></div>
    <div class="layui-m-layer " id="address">
        <select id="provice">
            <option selected="selected" value="请选择省" disabled="disabled">请选择省</option>
        </select>
        <select id="city">
            <option selected="selected" value="请选择市" disabled="disabled">请选择市</option>
        </select>
        <select id="district">
            <option selected="selected" value="请选择区/县" disabled="disabled">请选择区/县</option>
        </select>
        <select id="streets">
            <option selected="selected" value="请选择街道/镇" disabled="disabled">请选择街道/镇</option>
        </select>
    </div>
</div>
<script>
    $(function () {
        //先隐藏市、区、街道
        $("#city").hide();
        $("#district").hide();
        $("#streets").hide();
        //加载省份数据
        $.ajax({
            type: "get",
            url: "https://ipservice.suning.com/les/provinceList-callback.html",
            dataType: "jsonp",
            jsonpCallback: "callback",
            jsonp: "callback",
            success: function (data) {
                //获取所有的省份信息
                var proviceList = data.provinces;
                //开始填充省份信息到select下面的option中
                $.each(proviceList, function (i, val) {
                    // console.log(val);
                    $("#provice").append("<option value=" + val.commerceId + ">" + val.name + "</option>");
                })
            }
        });
        //监测省份值的改变，由此加载城市
        $("#provice").on("change", function (e) {
            $("#city").hide();
            $("#district").hide();
            $("#streets").hide();
            var proviceSelected = $(e.target).val()
            console.log($(e.target).val());
            $("#city").empty();
            // $("#city").empty().append("<option selected=\"selected\" value=\"请选择市\" disabled=\"disabled\">请选择市</option>");
            $.ajax({
                type: "get",
                url: "https://ipservice.suning.com/les/cityList-" + proviceSelected + "-callback.html",
                dataType: "jsonp",
                jsonpCallback: "callback",
                jsonp: "callback",
                success: function (data) {
                    //获取所有的省份信息
                    var cityList = data.cities;
                    $("#city").attr("disabled", false);
                    //开始填充省份信息到select下面的option中
                    $.each(cityList, function (i, val) {
                        // console.log(val);
                        $("#city").append("<option value=" + val.lesId + ">" + val.name + "</option>");
                    });
                    //判断城市是否只有一个值为直辖市
                    if (cityList.length > 1) {
                        //多个值，添加选择头option
                        $("#city").prepend("<option selected=\"selected\" value=\"请选择市\" disabled=\"disabled\">请选择市</option>");
                    } else {
                        //一个值，直接显示，并且使其不可用置灰
                        $("#city").attr("disabled", true);
                        $("#city").trigger("change");
                    }
                    $("#city").show();
                }
            });
        });
        //监测市值的改变，由此加载县区
        $("#city").on("change", function (e) {
            $("#district").hide();
            $("#streets").hide();
            var citySelected = $(e.target).val()
            console.log($(e.target).val());
            $("#district").empty();
            // $("#city").empty().append("<option selected=\"selected\" value=\"请选择市\" disabled=\"disabled\">请选择市</option>");
            $.ajax({
                type: "get",
                url: "https://ipservice.suning.com/les/districtList-" + citySelected + "-callback.html",
                dataType: "jsonp",
                jsonpCallback: "callback",
                jsonp: "callback",
                success: function (data) {
                    //获取所有的省份信息
                    var districtList = data.districts;
                    $("#district").attr("disabled", false);
                    //开始填充省份信息到select下面的option中
                    $.each(districtList, function (i, val) {
                        // console.log(val);
                        $("#district").append("<option value=" + val.cityLesId + ">" + val.name + "</option>");
                    });
                    if (districtList.length > 1) {
                        $("#district").prepend("<option selected=\"selected\" value=\"请选择县区\" disabled=\"disabled\">请选择县/区</option>");
                    } else {
                        $("#district").attr("disabled", true);
                        $("#district").trigger("change");
                    }
                    $("#district").show();
                }
            });
        });
        //监测区值的改变，由此加载街道/镇
        $("#district").on("change", function (e) {
            $("#streets").hide();
            var streetSelected = $(e.target).val();
            console.log($(e.target).val());
            $("#streets").empty();
            if (streetSelected != null && streetSelected.trim().length > 0) {
                var streePrev = streetSelected.substring(0, 3);
                var streeLast = streetSelected.substring(3);
                // $("#city").empty().append("<option selected=\"selected\" value=\"请选择市\" disabled=\"disabled\">请选择市</option>");
                $.ajax({
                    type: "get",
                    url: "https://ipservice.suning.com/les/streetList-" + streePrev + "-" + streeLast + "-callback.html",
                    dataType: "jsonp",
                    jsonpCallback: "callback",
                    jsonp: "callback",
                    success: function (data) {
                        //获取所有的省份信息
                        var streetList = data.streets;
                        $("#streets").attr("disabled", false);
                        //开始填充省份信息到select下面的option中
                        $.each(streetList, function (i, val) {
                            // console.log(val);
                            $("#streets").append("<option value=" + val.districtLesId + ">" + val.name + "</option>");
                        });
                        if (streetList.length > 1) {
                            $("#streets").prepend("<option selected=\"selected\" value=\"请选择街道/镇\" disabled=\"disabled\">请选择街道/镇</option>");
                        } else {
                            $("#streets").attr("disabled", true);
                        }
                        $("#streets").show();
                    }
                });
            }
        });
    })
</script>
</body>
</html>

select2插件方式实现，地址数据来源与苏宁接口 

select2插件带有搜索功能

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>address</title>
    <link rel="stylesheet" href="./css/select2.min.css">
    <script src="./js/jquery-3.3.1.js"></script>
    <script src="./js/select2/js/select2.full.js"></script>
    <script src="./js/select2/js/i18n/zh-CN.js"></script>
</head>
<body>
<div class="container">
    <div><h3>请填写地址信息：</h3></div>
    <div id="addrDiv">
        <select id="provices">
            <option></option>
        </select>
        <select id="citys">
            <option></option>
        </select>
        <select id="districts">
            <option></option>
        </select>
        <select id="streets">
            <option></option>
        </select>
    </div>
</div>
<script>
    $(function () {
          $("#citys").hide();
          $("#districts").hide();
          $("#streets").hide();
        //首先加载所有省份
        $.ajax({
            type: "get",
            url: "https://ipservice.suning.com/les/provinceList-callback.html",
            dataType: "jsonp",
            jsonp: "callback",
            jsonpCallback: "callback",
            success: function (data) {
                console.log(data);
                var proviceList = data.provinces;
                var proviceListSelect2 = [];
                for (var key in proviceList) {
                    //将数据重新封装成select2需要的格式
                    proviceListSelect2.push({id: proviceList[key].commerceId, text: proviceList[key].name});
                }
                $("#provices").select2({
                    placeholder: "请选择省",
                    language: "zh-CN",
                    width: 200,
                    data: proviceListSelect2
                })

            }
        });
        //省份值改变后，加载citys
        $("#provices").change(function () {
            //清空市区街道
            $("#citys").empty();
            $("#districts").empty();
            $("#streets").empty();
            //隐藏市区街道
            $("#citys+span").hide();
            $("#districts+span").hide();
            $("#streets+span").hide();
            //获取改变的值
            var proviceSet = $("#provices option:selected").val();
            console.log("选中的省的id：" + proviceSet);
            $.ajax({
                type: "get",
                url: "https://ipservice.suning.com/les/cityList-" + proviceSet + "-callback.html",
                dataType: "jsonp",
                jsonp: "callback",
                jsonpCallback: "callback",
                success: function (data) {
                    console.log(data);
                    var cityList = data.cities;
                    var cityListSelect2 = []
                    for (var key in cityList) {
                        //将数据重新封装成select2需要的格式
                        cityListSelect2.push({id: cityList[key].lesId, text: cityList[key].name});
                    }
                    $('#citys').attr("disabled", false);
                    
                    if (cityListSelect2.length == 1) {
                        $('#citys').attr("disabled", true);
                        $("#citys").trigger("change", {data: cityListSelect2[0].id});
                    } else {
                        $("#citys").prepend("<option></option>");
                    }
                    $("#citys").select2({
                        placeholder: "请选择市",
                        language: "zh-CN",
                        width: 200,
                        data: cityListSelect2
                    });
                }
            });
        })
        //城市改变，加载区
        $("#citys").change(function (e, data) {
            //隐藏区、街道
            $("#districts+span").hide();
            $("#streets+span").hide();
            //获取改变的值两种方式
            var citysSelected;
            if (data == undefined) {
                citysSelected = $("#citys  option:selected").val();
            } else {
                citysSelected = data.data;
            }

            console.log("选中的市的id：" + citysSelected);
            $.ajax({
                type: "get",
                url: "https://ipservice.suning.com/les/districtList-" + citysSelected + "-callback.html",
                dataType: "jsonp",
                contentType: "text/javascript;charset=UTF-8",
                jsonp: "callback1",
                jsonpCallback: "callback",
                success: function (data) {
                    console.log(data);
                    var districtList = data.districts;
                    var districtsListSelect2 = []
                    for (var key in districtList) {
                        //将数据重新封装成select2需要的格式
                        districtsListSelect2.push({
                            id: districtList[key].cityLesId
                            , text: districtList[key].name
                        });
                    }
                    $("#districts").empty();
                    $('#districts').attr("disabled", false);
                    if (districtsListSelect2.length == 1) {
                        $('#districts').attr("disabled", true);
                        $("#districts").trigger("change", {data: districtsListSelect2[0].id});
                    } else {
                        $("#districts").prepend("<option></option>");
                    }
                    $("#districts").select2({
                        placeholder: "请选择县/区",
                        language: "zh-CN",
                        width: 200,
                        data: districtsListSelect2
                    })

                }
            });
        })

        //区改变，加载街道
        $("#districts").change(function (e, data) {
            $("#streets+span").hide();
            //获取改变的值
            var streetsSelected;
            console.log("传参data:" + data);
            if (data == undefined || data == null) {
                streetsSelected = $("#districts  option:selected").val();
            } else {
                streetsSelected = data.data;
            }
            console.log("选中的区的id：" + streetsSelected);
            //剪切参数
            var streeSelect2Prev = streetsSelected.substring(0, 3);
            var streeSelect2Last = streetsSelected.substring(3);
            $.ajax({
                type: "get",
                url: "https://ipservice.suning.com/les/streetList-" + streeSelect2Prev + "-" + streeSelect2Last + "-callback.html",
                dataType: "jsonp",
                contentType: "text/javascript;charset=UTF-8",
                jsonp: "callback2",
                jsonpCallback: "callback",
                success: function (data) {
                    console.log(data);
                    var streetList = data.streets;
                    var streetListSelect2 = []
                    for (var key in streetList) {
                        //将数据重新封装成select2需要的格式
                        streetListSelect2.push({
                            id: streetList[key].districtLesId
                            , text: streetList[key].name
                        });
                    }
                    $("#streets").empty();
                    $('#streets').attr("disabled", false);
                    if (streetListSelect2.length == 1) {
                        $('#streets').attr("disabled", true);
                    } else {
                        $("#streets").prepend("<option></option>")
                    }
                    $("#streets").select2({
                        placeholder: "请选择街道",
                        language: "zh-CN",
                        width: 200,
                        data: streetListSelect2
                    });
                }
            });
        })
    })
</script>

</body>
</html>

 

猪哥哥呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【uniapp+vue3+u-picker】获取中国省市区数据结构，省市区数据三级联动json文件完整版，已实现三级联动效果+省市区街道数据四级联动json文件完整版，已实现四级联动效果
花椒和蕊的博客
09-19 2889
【uniapp+vue3+u-picker】获取中国省市区数据结构，省市区数据三级联动json文件完整版，已实现三级联动效果
解决select2插件下拉搜索框，输入拼音能够匹配中文汉字的问题
热门推荐
qq_33142257的博客
09-18 2万+
首先肯定需要引用select2.js：点击打开链接，点击链接，自己新建一个select2.js把链接中的源码复制进去； 然后这里面需要修改的是这个方法： function matcher (params, data) { // Always return the object if there is nothing to compare if ($.trim(param
【2024最新】获取街道、镇级的地图geoJson数据方法
最新发布
weixin_45456848的博客
04-25 2089
获取街道、镇级的地图geoJson数据方法
最新中国地区各种JSON、CSV数据大全
小北的博客
07-13 7749
中华人民共和国的行政区划
最新省市区json字符串
qq_39636838的博客
07-14 1597
省市区Json
用于ECharts的全国省市区县乡镇街道级的行政区划边界数据(GeoJSON格式)
沧海之巅的专栏
06-03 4339
通过 http://datav.aliyun.com/tools/atlas 可以下载到全国省市区县级的行政区划边界数据(GeoJSON格式)。国家地理信息公共服务平台 天地图 https://www.tianditu.gov.cn/ 【省级节点】中，部分省份提供了乡镇街道的边界数据。https://map.vanbyte.com 提供了免费的省市县3级行政边界数据(GeoJSON格式)、省市县乡4级联动数据。来源4： https://map.vanbyte.com。
S2SH+jQuery+JSON+Ajax注册--异步校验
03-21
NULL 博文链接：https://yklovejava-163-com.iteye.com/blog/970966
AJAX+json初学案例
06-12
ajax如何连接json数据，如何简单读取数据，初学者一看就会。
asp+ajax+json医生预约系统源码和数据库
01-20
资源名：asp+ajax+json医生预约系统源码和数据库 资源类型：程序源代码 源码说明： asp ajax json医生预约系统,此demo详细介绍了ajax,json的实例应用，适合新手学习借鉴 适合人群：新手及有一定经验的开发人员
php-curl+ajax+json数据传输2.0版本
07-04
php-curl+ajax+json数据传输2.0版本,用curl解决ajax跨域请求被拒绝问题。不用在php后端设置跨域请求了。
Ajax+Json案例
02-13
Ajax+Json案例
省市区街道JSON文件
08-06
{ "value": 1, "label": "北京市", "code": "", "children": [ { "value": 1, "label": "市辖区", "code": "110100000000", "children": [ { "value": 1, "label": "东城区", "code": "110101000000", "children": [ { "value": 1, "label": "东华门街道", "code": "110101001000" }, { "value": 2, "label": "景山街道", "code": "110101002000" }, { "value": 3, "label": "交道口街道", "code": "110101003000" }, { "value": 4, "label": "安定门街道", "code": "110101004000" }, { "value": 5, "label": "北新桥街道", "code": "110101005000" }, { "value": 6, "label": "东四街道", "code": "110101006000" }, { "value": 7, "label": "朝阳门街道", "code": "110101007000" }, { "value": 8, "label": "建国门街道", "code": "110101008000" }, { "value": 9, "label": "东直门街道", "code": "110101009000" }, { "value": 10, "label": "和平里街道", "code": "110101010000" }, { "value": 11, "label": "前门街道", "code": "110101011000" }, { "value": 12, "label": "崇文门外街道", "code": "110101012000" } }
JSON省市区街道四级联动插件特效代码
03-20
JSON省市区街道四级联动插件是一款基于jQuery实现的json调用省市区街道收货地址选择代码。
中国省市区街道Json数据
03-25
中国省市区街道Json数据,微信小程序可直接使用。 module.exports = {"children":[ { "name":"北京", "id":"1", "children":[ { "name":"东城区", "id":"3", "children":[ { "name":"东华门街道", "id":"4", "children":null }, { "name":"景山街道", "id":"5", "children":null }, { "name":"交道口街道", "id":"6", "children":null },
全国省市区乡镇街道四级行政区json数据
04-14
全国省市区乡镇街道四级行政区json数据，含城市电话区号，行政编码，高德地图坐标系准确的中心点和边界线。
省市区街道-1573720561892.json
11-19
省市区镇的配置文件，还是比较详细的，配置element-ui下拉选择，样式很不错，element-ui 的下拉使用比较简单，遇到有问题的可以联系我
全国省市县json数据
zhaochengfang的博客
04-07 2273
[ { "value": "110000", "province": "北京市", "data": [ { "value": "110100", "city": "北京市", "dataList": [ { "value": "110101", "area": "东城区" }, { "value": "110102", "ar
tp中订单详情中ajax更换收货地址。
tjg888888的博客
10-19 1091
第一步：前端代码部分：                                                  收货地址                                                                              {$address.name}{$address.phone}         
省、市、区、乡镇/街道地址四级联动react+jquery附带json数据
qq_41805983的博客
06-10 1845
省、市、区、乡镇/街道地址四级联动react+jquery 主要使用jquery，无ui框架，适用性强 目前主要使用react开发项目，最近遇到一个需要四级联动的，但是antd中的地址数据格式不太好找，都是这样的： 于是就使用相对原始的下拉标签t+jquery写了个，安装jquery并import当前页面中就行，样式自己修改，下面是代码： import React, { Component } ...
省市区三级联动 mysql_javaweb--json--ajax--mysql实现省市区三级联动（附三级联动数据库）...
05-15
实现省市区三级联动的关键是建立好数据库，并且编写好对应的 SQL 语句。以下是一个简单的数据库设计： - 省份表 province，包括字段 id 和 name。 - 城市表 city，包括字段 id、name 和省份的外键 province_id。 - 区县表 district，包括字段 id、name 和城市的外键 city_id。 接下来是建表语句： ```sql -- 省份表 CREATE TABLE `province` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(20) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- 城市表 CREATE TABLE `city` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(20) NOT NULL, `province_id` int(11) NOT NULL, PRIMARY KEY (`id`), KEY `province_id` (`province_id`), CONSTRAINT `city_ibfk_1` FOREIGN KEY (`province_id`) REFERENCES `province` (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- 区县表 CREATE TABLE `district` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(20) NOT NULL, `city_id` int(11) NOT NULL, PRIMARY KEY (`id`), KEY `city_id` (`city_id`), CONSTRAINT `district_ibfk_1` FOREIGN KEY (`city_id`) REFERENCES `city` (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; ``` 接下来是查询省份、城市、区县的 SQL 语句： ```sql -- 查询所有省份 SELECT id, name FROM province; -- 查询某个省份下的所有城市 SELECT id, name FROM city WHERE province_id = ?; -- 查询某个城市下的所有区县 SELECT id, name FROM district WHERE city_id = ?; ``` 在 Java Web 项目中，可以使用 Ajax 和 JSON 技术实现省市区三级联动。前端页面发送 Ajax 请求，后端通过 JDBC 连接数据库，查询对应的省份、城市、区县信息，并以 JSON 格式返回给前端页面。前端页面再解析 JSON 数据，更新页面的省份、城市、区县下拉框选项。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值