Mybatis + js 实现下拉列表二级联动效果

一、业务需求

实现省份与城市的二级联动

二、实现效果

三、代码实现

1. province_city.jsp

前端界面实现

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>二级联动</title>
    <script src="/static/jQuery-1.11/jquery-1.11.3.min.js"></script>
    <script>
        // 页面加载完毕执行
        $(function () {
            let $p = $('#p');
            let $c = $('#c');
            // 给省份下拉框绑定值改变事件处理函数,当省份下拉框选项改变了,就发送请求获取这个省份对应
            // 城市数据,拿到数据再使用 DOM 显示在城市下拉框中
            $p.change(function () {
                // 获取被选中省份下拉框的 option 的 value 属性值,即省份 id 值
                let pid = $(this).val();

                // 清除旧有子元素(每次改变省份需要清除城市元素,否则城市元素会一直添加)
                $c.empty();
                // 请选择也被清除了,所以需要添加回来
                $c.append('<option value="-1">请选择</option>');
                // 判断是否选中了省份
                if (pid >= 1) {
                    $.post('/cities', 'pid=' + pid, function (data) {
                        // 遍历城市数组
                        data.forEach(function (value) {
                            console.log(value);
                            // 添加下拉元素
                            $c.append('<option value="' + value.id +'">' + value.name +'</option>');
                        });
                    });
                }
            });
        });
    </script>
</head>
<body>
省份:<select id="p">
    <option value="-1">请选择</option>
    <!-- 遍历后台传过来的省份集合 -->
    <c:forEach items="${allProvince}" var="province">
        <option value="${province.id}">${province.name}</option>
    </c:forEach>
</select>
城市:<select id="c">
    <option value="-1">请选择</option>
</select>
</body>
</html>

2. TwoController

后台处理方法

package com.yy.homework.web.controller;

import com.yy.homework.domain.City;
import com.yy.homework.domain.Province;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

@Controller
public class TwoController {
    // 获取省份 JSON 数据
    @RequestMapping("/provinces")
    public String getProvinces(Model model) {
        List<Province> allProvince = Province.getAllProvince();
        model.addAttribute("allProvince", allProvince);
        return "forward:/province_city.jsp";
    }

    // 获取对应省份的城市 JSON 数据
    @RequestMapping("/cities")
    @ResponseBody
    public List<City> getCities(Long pid) {
        return City.getCityByProvinceId(pid);
    }
}

2. Province

为了让代码少一点,看的更清晰些,我伪造了一些省份数据,真实数据应该是你自己从数据库中查询出来的,封装成集合的形式给 Controller 调用

package com.yy.homework.domain;

import java.util.ArrayList;
import java.util.List;

public class Province {
    private Long id;
    private String name;
    public Province() {
    }
    public Province(Long id, String name) {
        this.id = id;
        this.name = name;
    }
    public Long getId() {
        return id;
    }
    public String getName() {
        return name;
    }
    // 获取所有的省份
    public static List<Province> getAllProvince() {
        List<Province> provinces = new ArrayList<Province>();
        provinces.add(new Province(1L, "湖南"));
        provinces.add(new Province(2L, "广东"));
        provinces.add(new Province(3L, "湖北"));
        return provinces;
    }
}

3. Province

这里是我伪造的一些城市数据,真实数据应该是你自己根据前台页面传过来的 省份 id 从数据库中查询出来的,封装成集合的形式给 Controller 调用,返回前端界面

package com.yy.homework.domain;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

/**
 * @program: jQuery-test02
 * @ClassName City
 * @description:
 * @author: YanYang
 * @create: 2021-05-28 18:07
 **/
public class City {
    private Long id;
    private String name;

    public City() {
    }
    public City(Long id, String name) {
        this.id = id;
        this.name = name;
    }
    public Long getId() {
        return id;
    }
    public String getName() {
        return name;
    }
    public String toString() {
        return "City [id=" + id + ", name=" + name + "]";
    }
    /**
     * 根据省份 id 查询省份中的城市!
     * @return
     */
    public static List<City> getCityByProvinceId(Long pid) {
        List<City> citys = new ArrayList<City>();
        if (pid == 1) {
            citys = Arrays.asList(
                    new City(11L, "长沙市"),
                    new City(12L, "株洲市"),
                    new City(13L, "湘潭市"),
                    new City(14L, "衡阳市"),
                    new City(15L, "邵阳市"),
                    new City(16L, "岳阳市"),
                    new City(17L, "常德市"),
                    new City(18L, "张家界市")
            );
        } else if (pid == 2) {
            citys = Arrays.asList(
                    new City(21L, "广州市"),
                    new City(22L, "深圳市"),
                    new City(23L, "佛山市"),
                    new City(24L, "中山市"),
                    new City(25L, "珠海市"),
                    new City(26L, "汕头市"),
                    new City(27L, "潮州市"),
                    new City(28L, "东莞市")
            );
        } else if (pid == 3) {
            citys = Arrays.asList(
                    new City(31L, "孝感市"),
                    new City(32L, "黄冈市"),
                    new City(33L, "咸宁市"),
                    new City(34L, "恩施州"),
                    new City(35L, "鄂州市"),
                    new City(36L, "武汉市"),
                    new City(37L, "荆门市"),
                    new City(38L, "襄阳市")
            );
        }
        return citys;
    }
}

总结:

以上就是用二级联动的代码了,代码仅供参考,欢迎讨论交流。

以上就是Mybatis + js 实现下拉列表二级联动的详细内容,更多关于Mybatis下拉列表二级联动的资料请关注我们其它相关文章!

时间: 2021-06-10

Mybatis中实体类属性与数据列表间映射方法介绍

Mybatis不像Hibernate中那么自动化,通过@Column注解或者直接使用实体类的属性名作为数据列名,而是需要自己指定实体类属性和 数据表中列名之间的映射关系,这一点让用惯了Hibernate的人很不习惯,所幸经过探索找到了建立映射关系的三种办法,其中总也有比较 简单的. 首先先定义一个实体类,如下: public class User implements Serializable { private Integer userId; private String userName;

详解jeefast和Mybatis实现二级联动的问题

在实现下拉框的基础上进行二级联动(这个项目有bug添加可以完成,但是修改获取不到对应的值,这个问题解决以后我会在发布一篇文章) JS部分 // 二级联动 @RequestMapping("/all/{gid}") @RequiresPermissions("platform:classes:all") public R list1(@PathVariable("gid") int gid){ Map<String,Object>map

详解Hibernate注解方式的二级缓存

详解Hibernate注解方式的二级缓存 hibernate默认情况下是支持一级缓存,也就是session级的缓存的,而默认情况下是不支持二级缓存,即sessionFactory级的缓存的,二级缓存        一般比较少去考虑它,除非对效率要求非常高的时候, 这时侯如果我们的某一个实体要在多个session里面使用需要用到session间的缓存的时候就可以进行配置来实现二级缓存了! 在看文档的时候说可以在persistence.xml里面进行配置,但我一般是不用这个文件的,就直接使用注解!

详解Spring与Mybatis的整合方法(基于Eclipse的搭建)

项目工程总览: 项目路径建的包不是唯一,只要之后配置的路径映射正确即可 Emp.java <properties> <spring.version>5.1.5.RELEASE</spring.version> <mybatis.version>3.4.6</mybatis.version> <log4j.version>1.2.17</log4j.version> </properties> <depen

详解Spring与Mybatis整合方法(基于IDEA中的Maven整合)

项目结构 项目路径可以自己定义,只要路径映射正确就可以 pom.xml <properties> <spring.version>5.1.5.RELEASE</spring.version> <mybatis.version>3.4.6</mybatis.version> <log4j.version>1.2.17</log4j.version> </properties> <dependencies&g

详解Spring Boot + Mybatis 实现动态数据源

动态数据源 在很多具体应用场景的时候,我们需要用到动态数据源的情况,比如多租户的场景,系统登录时需要根据用户信息切换到用户对应的数据库.又比如业务A要访问A数据库,业务B要访问B数据库等,都可以使用动态数据源方案进行解决.接下来,我们就来讲解如何实现动态数据源,以及在过程中剖析动态数据源背后的实现原理. 实现案例 本教程案例基于 Spring Boot + Mybatis + MySQL 实现. 数据库设计 首先需要安装好MySQL数据库,新建数据库 example,创建example表,用来测

详解Java的MyBatis框架中的缓存与缓存的使用改进

一级缓存与二级缓存 MyBatis将数据缓存设计成两级结构,分为一级缓存.二级缓存: 一级缓存是Session会话级别的缓存,位于表示一次数据库会话的SqlSession对象之中,又被称之为本地缓存.一级缓存是MyBatis内部实现的一个特性,用户不能配置,默认情况下自动支持的缓存,用户没有定制它的权利(不过这也不是绝对的,可以通过开发插件对它进行修改): 二级缓存是Application应用级别的缓存,它的是生命周期很长,跟Application的声明周期一样,也就是说它的作用范围是整个App

详解Java的MyBatis框架中SQL语句映射部分的编写

1.resultMap SQL 映射XML 文件是所有sql语句放置的地方.需要定义一个workspace,一般定义为对应的接口类的路径.写好SQL语句映射文件后,需要在MyBAtis配置文件mappers标签中引用,例如: <mappers> <mapper resource="com/liming/manager/data/mappers/UserMapper.xml" /> <mapper resource="com/liming/mana

详解SpringMVC和MyBatis框架开发环境搭建和简单实用

1.下载SpringMVC框架架包,下载地址: 点击下载 点击打开地址如图所示,点击下载即可 然后把相关的jar复制到lib下导入 2.MyBatis(3.4.2)下载 点击下载 MyBatis中文文档地址 点击查看 下载解压之后把jar复制到lib下导入,大概是这样子的 3.jdbc连接库还没有下载...这个是5.1.41版本的... 点击下载 解压之后这样子... 4.fastjson 阿里巴巴的json解析库 点击下载 版本是1.2.24 这个是托管到了github上面的,地址是:点击进入

详解Java的MyBatis框架中的事务处理

一.MyBatis单独使用时,使用SqlSession来处理事务: public class MyBatisTxTest { private static SqlSessionFactory sqlSessionFactory; private static Reader reader; @BeforeClass public static void setUpBeforeClass() throws Exception { try { reader = Resources.getResourc

详解spring boot mybatis全注解化

本文重点给大家介绍spring boot mybatis 注解化的实例代码,具体内容大家参考下本文: pom.xml <!-- 引入mybatis --> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>1.3.0</version

详解Java的MyBatis框架与Spring框架整合中的映射器注入

MyBatis-Spring允许你在Service Bean中注入映射器.当使用映射器时,就像调用DAO那样来调用映射器就可以了,但是此时你就不需要进行任何DAO实现的编码,因为MyBatis会为你进行. 使用注入的映射器,你的代码就不会出现任何MyBatis-Spring依赖和MyBatis依赖.在我们的应用中有这样一个简单的映射器.你也应该知道映射器仅仅是一个接口: public interface UserMapper { User getUser(String userId); } 这是