首页 前端知识 第10讲:使用ajax技术实现省市县三级联动(jQuery)

第10讲:使用ajax技术实现省市县三级联动(jQuery)

2024-05-24 08:05:50 前端知识 前端哥 510 766 我要收藏

多级联动是在软件开发中经常碰到的问题,本文章与大家探讨三级联动的技术,使用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;
转载请注明出处或者链接地址:https://www.qianduange.cn//article/9338.html
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!