淘先锋技术网

首页 1 2 3 4 5 6 7

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

多级联动是在软件开发中经常碰到的问题，本文章与大家探讨三级联动的技术，使用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 =