第10讲：使用ajax技术实现省市县三级联动（jQuery）

原创

已于 2023-06-24 10:26:01 修改 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #jquery #servlet #fastjson #mysql

于 2023-06-24 10:01:43 首次发布

本文详细介绍了如何使用jQuery的ajax技术，结合Servlet和MySQL数据库，通过 ProvinceServlet.java 处理请求，实现省市县的三级联动效果。教程涵盖环境配置、数据表结构、javabean、数据库操作类以及前端页面的创建，同时提到fastjson用于数据封装。作者拥有丰富的软件开发和教学经验，提供了完整课程和源代码供学习。

多级联动是在软件开发中经常碰到的问题，本文章与大家探讨三级联动的技术，使用jQuery对ajax技术的支持，使用$.post方法实现省市县三级联动，后台使用jsp的servlet技术，MySQL数据库，fastjson封装json数据，具体实现如下：

环境要求

序号	资源	说明
1	jQuery插件	ajax通讯基础
2	mysql数据库	存储省市县数据
3	jdk1.8+	开发环境
4	tomcat8.5+	运行环境
5	fastjson	json数据封装对象

数据表结构及测试数据

DROP TABLE IF EXISTS `province`;
CREATE TABLE `province`  (
  `id` varchar(6) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `name` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

INSERT INTO `province` VALUES ('360000', '江西省');
INSERT INTO `province` VALUES ('360100', '南昌市');
INSERT INTO `province` VALUES ('360101', '西湖区');
INSERT INTO `province` VALUES ('360102', '东湖区');
INSERT INTO `province` VALUES ('360200', '赣州市');
INSERT INTO `province` VALUES ('360201', '章贡区');
INSERT INTO `province` VALUES ('360202', '开发区');
INSERT INTO `province` VALUES ('360203', '南康区');
INSERT INTO `province` VALUES ('360204', '瑞金市');
INSERT INTO `province` VALUES ('360205', '崇义县');
INSERT INTO `province` VALUES ('400000', '广东省');
INSERT INTO `province` VALUES ('400100', '广州市');
INSERT INTO `province` VALUES ('400101', '白云区');
INSERT INTO `province` VALUES ('400102', '黄浦区');
INSERT INTO `province` VALUES ('400103', '海珠区');
INSERT INTO `province` VALUES ('400200', '深圳市');
INSERT INTO `province` VALUES ('400201', '福田区');
INSERT INTO `province` VALUES ('400202', '南山区');

ProvinceVo.java（javabean）

package com.bean;

import java.io.Serializable;

public class ProvinceVo  implements Serializable {

    private String id;
    private String name;


    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(St