使用Ajax异步请求实现省市联动下拉列表

Irving 11 2

于 2022-05-26 16:41:02 发布

阅读量759

点赞数

分类专栏：前后端交互文章标签： ajax javascript java mysql

本文链接：https://blog.csdn.net/k_achu/article/details/124986698

版权

本文介绍了如何通过Ajax异步请求实现省市联动的下拉列表功能。在选择省份后动态加载对应城市的下拉选项。环境配置包括IntelliJ IDEA、Tomcat、JDK17和MySQL8.0.22。数据库设计包含省市区的层级关系，前端接收服务器返回的JSON数据填充选项，服务器端使用Java处理数据库查询并以JSON格式响应。

摘要由CSDN通过智能技术生成

省市联动下拉列表：在网页上，选择对应的省份之后，动态的关联出该省份对应的市。选择对应的市之后，动态的关联出该市对应的区。本文只实现省市联动

本文使用的环境是：

集成开发环境：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 = "