省市联动下拉列表:在网页上,选择对应的省份之后,动态的关联出该省份对应的市。选择对应的市之后,动态的关联出该市对应的区。本文只实现省市联动
本文使用的环境是:
集成开发环境:IntelliJ IDEA 2022.1
开源服务器:tomcat-10.0.20
Java驱动:jdk17
MySQL版本:mysql=8.0.22
首先进行数据库表的设计:每个省份或城市都有编码,字段为code,每个省份或城市的都有相应名字,字段为area,为了方便我们使用一张表存储数据,所以每个城市都有一个父编码表示所在的省份的编码,而省份没有父编码。如下图所示的数据库表截图:
然后进行前端页面的设计:
一共两个下拉列表:
实现代码:接受服务器端返回的json格式字符串,取出其中的数据,放到前端界面上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax实现省市联动</title>
<script type="text/javascript">
window.onload = function (){
// 在页面加载完成之后将省份查询出来,显示出下拉列表
/*
ajax发送异步请求四步
1.创建XMLHttpRequest对象
2.编写回调函数
判断核心对象XMLHttpRequest的状态,其中
0:请求未初始化
1:服务器连接已建立
2:请求已收到
3:正在处理请求
4:请求已完成且响应已就绪
3.开启通道
4.发送请求
*/
// 第一步
var xhr1 = new XMLHttpRequest()
// 第二步
xhr1.onreadystatechange = function (){
if (xhr1.readyState == 4){ // 判断ajax核心对象的状态
if (xhr1.status ==200){ // 判断浏览器的响应状态码,200表示请求成功
// 接受服务器端返回的json格式字符串:xhr1.responseText,将其使用JSON.parse()函数转化为一个jaon对象
var jsonArea = JSON.parse(xhr1.responseText)
// 创建一个字符型变量,进行拼接 省 下拉列表的html代码
var html = "<option valu