SpringBoot 全国省市区三级联动 Ajax动态绑定select


文章目录

  • 前言
  • 一、三级联动？
  • 二、分析与编码
  • 1、数据库
  • 2、SQL
  • 3、编写Controller
  • 4、Ajax动态绑定select
  • 总结


前言

全国省市区的联动算是很经典的一个三级联动的例子了，今天结合SpringBoot，实现此功能

一、三级联动？

也就是子级随着父级的变化，子级也需要随之改变。

二、分析与编码

1、数据库

全国省份表:

省市区三级mysql 省市区三级联动的数据_三级联动

全国市级表:

省市区三级mysql 省市区三级联动的数据_ajax_02

全国区名表:

省市区三级mysql 省市区三级联动的数据_省市区三级mysql_03

我们观察数据库能观察得出来，三级联动，首先选择省份之后，通过选择得到此省份的code值，根据此code值去市级表匹配 [provincecode]省份code)字段的值去查询，城市匹配区域也是同理。

2、SQL

1、查询省份是查所有就不多说了

2、根据选择的省份查询所有城市

省市区三级mysql 省市区三级联动的数据_ajax_04


带入场景我们选择河北，得到的code值是130000

SQL如下：

SELECT * 
FROM `t_address_city` AS c 
INNER JOIN t_address_province AS p
ON p.`code`=c.provincecode WHERE p.`code`=130000

省市区三级mysql 省市区三级联动的数据_三级联动_05

3、根据选择的城市得到所有区域跟上一步一样不再啰嗦

3、编写Controller

第一个查询省份是查询所有

省市区三级mysql 省市区三级联动的数据_省市区三级mysql_06

查询第市级是需要根据前台所选择的哪个省份所传过来的code值决定

省市区三级mysql 省市区三级联动的数据_省市区三级mysql_07

查询地区也是跟上一步同理

省市区三级mysql 省市区三级联动的数据_省市区三级mysql_08

4、Ajax动态绑定select

前端页面

![在这里插入图片描述](

省市区三级mysql 省市区三级联动的数据_java_09

省份下拉框选中事件异步请求得到数据绑定下拉框

省市区三级mysql 省市区三级联动的数据_前端_10

选择市级绑定区域也是同理，要注意$("#xxx")选择的Select标签的id

总结

以上就是本篇文章要讲的内容，本文仅仅简单分析了省份三级联动数据库，异步请求方便了动态绑定，最重要的还是要先分析数据库结构，一级一级根据code值来查询，想通这点，就没什么大问题了。