springboot+ajax实现省市区联动

最新推荐文章于 2022-12-11 09:36:46 发布

中二的小北

最新推荐文章于 2022-12-11 09:36:46 发布

阅读量415

点赞数 1

本文链接：https://blog.csdn.net/weixin_61307867/article/details/127995991

版权

提示：用vue写的话简单一点

前言

省市联动的话主要流程是拿到所属省份编码去查城市拿到城市编码去查区县然后使用ajax把数据返回到页面上就行了

提示：以下是本篇文章正文内容，下面案例可供参考

`1.效果`

过程就是当我点击省的时候拿到省的编号去数据库查找市然后通过ajax返回数据到页面上当我选择市的时候也是拿到他的市区编码传到后台查出来用Ajax在页面中显示出来

2.数据库

sql: mysql省市区数据库表源码 - Xiao_野猪 - 博客园 (cnblogs.com)

开始：

先创建一个boot项目把基本的包和实体类先创建好不会就去看我写的球员项目

再不会就拖下去斩了再不会就去干实施吧

接下来就是上后台代码了

有其他的页面是因为我还写了增删改查

实体类：

!!!!接下来就是页面了也是最重要的地方

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<table>
        <th>

            省<select name="code" id="province" onchange="showt_address_city()">
            <option value="0">请选择</option>
            <option th:each="province:${province}"  th:text="${province.name}" th:value="${province.code}" ></option>
        </select>&nbsp;&nbsp;

            市：<select id="city" name="city" onchange="show_area()">
            <option value="0">-请选择-</option>
        </select>&nbsp;&nbsp;

            县区：<select id="area" name="area">
            <option value="0">-请选择-</option>
        </select>&nbsp;&nbsp;<br/>

        </th>
    </tr>
  

</table>
</body>
</html>
<script>
function showt_address_city(){
 var provincecode=$("#province option:selected").val();
 alert(provincecode);
    $.get(
        '/get/City?provincecode='+provincecode,//请求的url
        function (data){//回调函数，当请求成功时会调用
            //3.   清空当前select中旧的节点
            $('#city').empty();//清除旧节点
            $('#area').empty();
            $('#area').append('<option value="0">-请选择-</option>');
            $('#city').append('<option value="0">-请选择-</option>');
            //4.   循环遍历取出城市名，和城市id
            for(var i=0;i<data.length;i++){//遍历取出值
                console.log(data[i].name);
                //5.   获取select下拉框这个对象
                //6.   动态的添加到该select中
                $('#city').append("<option value='"+data[i].code+"'>"+data[i].name+"</option>");//append添加到select中
            }
        },
        'json'//返回的数据类型
    )
}
function show_area() {
    //1.   当点击城市，触发onchange()事件，获取选择的id值
    var code = $("#city option:selected").val();
    alert(code);
    //2.   拿到id值，$.get()查询县区信息
    $.get(
        '/get/Town?citycode='+code,
        function (data) {
            //3.   清空当前select中旧的节点
            $('#area').empty();//清除旧节点
            $('#area').append('<option value="0">-请选择-</option>');
            //4.   循环遍历取出县区名，和县区id
            for (var i = 0; i < data.length; i++) {//遍历取出值
                console.log(data[i].name);
                //5.   获取select下拉框这个对象
                //6.   动态的添加到该select中
                $('#area').append("<option value='" + data[i].code + "'>" + data[i].name + "</option>");
            }
        },
        'json'
    )
}
</script>

var provincecode=$("#province option:selected").val() 这段代码就是能拿到你选中的省的编码

alert()是我测试看有没有拿错用的弹窗

οnchange=""的意思是当元素的值发生改变时，会发生 onchange 事件。

然后就用ajax.get方法把获取到编码传到controller层去查询然后再把数据放回来再通过 for循环

在动态的添加到该select中

然后就是controller层

这个是查出所有的省

这个就是根据编码查找城市区县

service和接口就不展示了因为就是查询没有其他东西不需要额外的操作

处理过程 html ——controller——service接口——serviceimpl(实现类)-——Mapper接口——Mapper.xml——数据库

怕有些人看不懂三层架构

直接上Mapper.xml

只有查询，增删改就不放了

总结：重点就是用Ajax怎么获取选择的value值，然后怎么清空旧节点怎么动态的把数据添加到select上

了解后实现就不难 Ajax可以直接套模板

如果对你有帮助请点个赞支持一下制作不易

中二的小北

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
springboot+ajax实现省市区联动

springboot+ajax实现省市区联动
复制链接

扫一扫

springboot+ajax实现省市区联动

前言

1.效果

开始：

再不会就拖下去斩了 再不会就去干实施吧

接下来就是上后台代码了

!!!!接下来就是页面了 也是最重要的地方

总结：重点就是用Ajax怎么获取选择的value值，然后怎么清空旧节点 怎么动态的把数据添加到select上

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

`1.效果`

再不会就拖下去斩了再不会就去干实施吧

!!!!接下来就是页面了也是最重要的地方

总结：重点就是用Ajax怎么获取选择的value值，然后怎么清空旧节点怎么动态的把数据添加到select上