Mybatis与Ajax实现省市区三级联动

最新推荐文章于 2022-03-10 20:26:43 发布
最新推荐文章于 2022-03-10 20:26:43 发布
阅读量213 收藏
点赞数
分类专栏： CSDN 文章标签： html mysql ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/V_99999/article/details/109328473
版权

1.先看一下效果图

在这里插入图片描述

1.我们先来看一下数据库

proinves city county 分别代表省，市，区的三张表
proinves的表
在这里插入图片描述
City表
在这里插入图片描述
County表
在这里插入图片描述

2.对应的service层

@Service
public class TestService {

    @Autowired
    ProvinceMapper provinceMapper;

    @Autowired
    CityMapper cityMapper;

    @Autowired
    CountyMapper countyMapper;

    /**
     * 获取所有省的信息
     * @return
     */
    public Msg getProvinces(){
        ProvinceExample example = new ProvinceExample();
        List<Province> list = provinceMapper.selectByExample(example);
        return Msg.success().add("list", list);

    }

    /**
     * 根据省份id获取市的信息
     * @param provinceId
     * @return
     */
    public Msg getCityByProvinces(Long provinceId){
        CityExample example = new CityExample();
        Criteria criteria = example.createCriteria();
        criteria.andProvinceidEqualTo(provinceId);
        List<City> list = cityMapper.selectByExample(example);
        return Msg.success().add("list", list);
    }


    /**
     * 根据市的id获取区的信息
     * @param CityId
     * @return
     */
    public Msg getCountyByCityId(Long CityId){
        CountyExample example = new CountyExample();
        com.atguigu.crud.bean.CountyExample.Criteria criteria = example.createCriteria();
        criteria.andCityidEqualTo(CityId);
        List<County> list = countyMapper.selectByExample(example);
        return Msg.success().add("list", list);

    }

}

3.Controller层.

@Controller
public class TestController {

    @Autowired
    TestService testService;

    @RequestMapping("/getProvinces")
    @ResponseBody
    public Msg getProvinces(){

        return testService.getProvinces();

    }


    @RequestMapping("/getCityByProvinceId")
    @ResponseBody
    public Msg getCityBuProvinces(Long provinceId){
        return testService.getCityByProvinces(provinceId);

    }


    @RequestMapping("/getCountyByCityId")
    @ResponseBody
    public Msg getCountyByCityId(Long CityId){
        return testService.getCountyByCityId(CityId);
    }
}

4.前台代码

HTML

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
        %>
<link rel="stylesheet"
        href="${APP_PATH}/static/bootstrap/css/bootstrap.css">
<script type="text/javascript"
        src="${APP_PATH}/static/js/jquery-2.0.0.min.js"></script>
</head>
<body>

<div class="form-group">
<label class="col-sm-2 control-label">Province</label>
<div class="col-sm-2">
<select class="form-control" name="dId" id="Province_add_select"
        οnchange="selectCitys(this)">
</select>
</div>
</div>

<div class="form-group">
<label class="col-sm-2 control-label">City</label>
<!-- 部门提交部门id即可 -->
<div class="col-sm-2">
<select class="form-control" name="dId" id="City_add_select"
        οnchange="selectCountys(this)">
</select>
</div>
</div>

<div class="form-group">
<label class="col-sm-2 control-label">County</label>
<div class="col-sm-2">
<select class="form-control" name="dId" id="County_add_select">
</select>
</div>
</div>

<script type="text/javascript">
        //页面加载时获取省的信息
        $(function() {
        getProvinces();
        });

        function getProvinces(ele) {

        $.getJSON("${APP_PATH}/getProvinces", function(data) {
        $.each(data.extend.list, function() {
        var opt = $("<option></option>").append(this.provincename)
        .attr("provinceid", this.provinceid);
        opt.appendTo("#Province_add_select");
        })
        });
        }

        //下拉框改变时获取相应市的信息                     
        function selectCitys(ele) {

        var provinceid = $("#Province_add_select").find("option:selected")
        .attr("provinceid");

        $.get("${APP_PATH}/getCityByProvinceId", {
        provinceId : provinceid
        }, function(data) {
        $("#City_add_select").empty();
        $.each(data.extend.list, function() {
        var opt = $("<option></option>").append(this.cityname)
        .attr("cityId", this.cityid);
        opt.appendTo("#City_add_select");
        })

        })

        }

        //下拉框改变时获取相应区的信息
        function selectCountys(ele) {
        var Cityid = $("#City_add_select").find("option:selected").attr(
        "cityId");
        $.get("${APP_PATH}/getCountyByCityId", {
        CityId : Cityid
        }, function(data) {
        $("#County_add_select").empty();
        $.each(data.extend.list, function() {
        var opt = $("<option></option>").append(this.countyname);
        opt.appendTo("#County_add_select");
        })

        })

        }
 
      /*  var e = ele.options[ele.selectedIndex].attr("provinceid");
       alert(e);        */
</script>


<script type="text/javascript"
        src="${APP_PATH}/static/bootstrap/js/bootstrap.js"></script>
</body>
</html>
V_99999
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Idea：java使用ajax+SpringMVC+Mybatis实现省市县三联动
programmer-dll
05-07 299
最近在学习SSM框架的时候，觉得有必要对select下拉框进行动态加载一下，然后不知道怎么回事，就想出来使用ajax进行动态加载，进而就触及到了使用JSONObject对数据的序列化处理 java的这个三联动主要是为了展示ajax的异步刷新与对jsp页面的渲染 在java中使用JSONObject这个类，来序列化结果 数据库中的表： 结构目录： 1.Entity Province pub...
采用框架Spring+SpringMVC+mybatis搭建框架，完成省市区级联查询
10-17
今天花了点时间搭建了一个Spring+SpringMVC+mybatis的框架完成了，省市区级联查询；下面介绍我的步骤
Spring-SpringMVC-Mybatis框架下的 省市区 三级联动
u33445687的博客
06-15 5662
初学者学习SSM框架,若有问题,请留言. 首先看一下项目结构. 配置文件Web.xml, spring-dao.xml, springmvc-servlet.xml, configuration.properties 等就是常规没有特殊的,具体内容可以看我上一篇博客. 首先看一下Mysql的表 省市区三...
Ajax实现最简单的省市二级联动
2021_fc的博客
05-24 689
AJAX实现最简单的省市二级联动 实现效果 我这里不会搞动图-_- 难受 我这里使用的是springboot的项目 这里我对Mybatis进行了整合 大家有需要可以去看一下我之前的文章 跳转 项目结构 MySql 表数据 编写Sql <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/my
基于mybatis实现省市县三级联动
jiluoluoa的博客
03-10 505
需求：省市县首先只展示出来省，用户选择省份后，出现对应的市，选择城市后，展示对应的县/区 分析： 1.界面上首先展示出省，可以用监听器初始化数据就获得对应的省份 2.点击省份获得市对应的可以用异步传输即ajax 3.只有当用户选择才会将数据传回后端调用数据，否则不发出申请 初始化数据：InitializeListener import java.util.List; import javax.servlet.ServletContext; import javax.servlet.Servl
java 省市区三级联动
08-16
为了实现省市区三级联动，你需要创建一个服务接口，例如` ProvinceCityAreaService `，它能根据用户的选择（例如省份）动态地提供城市或区县的数据。这可能涉及到数据库的设计，其中存储了省、市、区的层级关系。你...
ssm+maven省市区三级联动
11-22
在这个名为“ssm+maven省市区三级联动”的项目中，我们将深入探讨如何运用Spring、SpringMVC和MyBatis（SSM）框架，配合Maven进行项目构建，以实现在MySQL数据库中的省市区数据联动。 首先，**Spring框架**是整个...
省市区 城市三级联动
10-30
在这个Java实现的案例中，我们主要关注如何通过代码来构建省、市、区的三级联动效果。 首先，我们需要理解“三级联动”的概念。在Web界面中，它是指当用户在第一级（例如省份）中做出选择后，第二级（如城市）会...
省市区三级联动
05-08
在IT行业中，省市区三级联动是一项常见的功能，尤其在移动端和Web应用的开发中，用于实现用户选择省份、城市和区县的过程。这个功能通常涉及到数据的层级结构处理、UI界面设计以及用户交互逻辑。以下将详细介绍这个...
ssm+mysql+easyui-tree省市区三级联动
11-20
总结来说，"ssm+mysql+easyui-tree省市区三级联动"项目结合了Java后端开发框架SSM和前端UI库EasyUI，通过MySQL数据库存储地理信息，利用Ajax实现前后端通信，最终在前端以树形控件的形式展示省市区的三级联动选择。...
ssm+ajax省市区联动
07-07
ssm最简单的配置加上ajax实现下拉省市联动，表格的话就三个字段吧，自己创建
java+ajax+mysql实现省市县三级联动
05-21
主要用于三级联动，使用的html，ajax，后端用的原生servlet，或者你也可以根据自己的需要使用框架，毕竟只是做了数据库查询操作，返回的是json格式的数据，所以对后端要求不高，本资源为自己整理出来的，当然数据库用的别人的，自己都能找到，
全国省市区数据sql （mysql）三级联动
05-22
全国(省)-(市)-(区)-mysql脚本数据，共四张表三张基础数据表和一张关联表
Mybatis与Ajax实现简单的分页功能
V_99999的博客
10-28 291
数据库的字段
Ajax+mybaits实现省市区三级联动
kkkkkkkk的博客
08-17 2996
1.先看一下效果图   1.我们先来看一下数据库 proinves  city  county 分别代表省，市，区的三张表 proinves的表 City表 County表 3.对应的service层 @Service public class TestService { @Autowired Provinc
springmvc+ajax实现省市区三级联动以及406 (Not Acceptable)的解决办法
ItLoong的博客
01-30 1115
我做一个小的测试实现功能 最主要是说一下遇到的问题： 我先用的spring3.2的包但是遇到好多的问我问题， （1）首先就是不能使用*.htm,*.html的地址后缀； （2）这个会报406 (Not Acceptable)的错误： 办法：1.你可以换成4.0的包，然后就能支持*.htm的后缀了；2.看看你的json包导进去没jackson-annotations-2.7.0.jar 
MyBatis实现分页与ajax笔记（小白向）
weixin_43441262的博客
11-30 297
MyBatis实现分页（使用PageHelper实现） 1：这里只是说明大致流程与具体实现，原理的话，不是我这种刚刚工作2年多的人该研究的。 步骤： 1：导入maven依赖（版本号，也可以通过父工程管理，当父子工程都指定的时候，执行就近原则，哈哈哈） <!--加入分页插件--> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId&
省市区三级联动，根据一个cityCode（递归）查询关联的父级信息
weixin_42704663的博客
03-21 4673
通过一个 citycode 比如 结果： 以下是封装的代码 //area.js import { findAllParents } from "@/utils/json"; export function getAreaCode(nodeId) { const parents = findAllParents(getArea(),{"code":no...
java ajax省市区三级联动
最新发布
08-08
Java Ajax省市区三级联动是一种前端页面交互功能，用于在用户选择省份、城市和区县时实现动态加载相应数据的功能。 首先，需要在前端页面通过HTML代码创建三个下拉框，分别表示省份、城市和区县。然后，使用JavaScript编写前端的Ajax请求，通过发送异步请求到后端服务，获取数据。 在后端Java代码中，可以使用Spring MVC或Servlet等框架处理前端Ajax请求。首先，需要在数据库中建立相应的省市区数据表，并将数据存储在表中。然后，可以使用JDBC或MyBatis等数据库访问框架，编写相应的Java代码实现数据的查询和返回。 具体实现时，可以通过监听省份下拉框的变化事件，在事件处理函数内发送Ajax请求到后端服务，将当前选择的省份作为参数传递给后端。后端服务可以根据省份查询对应的城市数据，将城市数据返回给前端。 类似地，继续监听城市下拉框的变化事件，在事件处理函数内发送Ajax请求到后端服务，将当前选择的城市和省份作为参数传递给后端。后端服务可以根据城市和省份查询对应的区县数据，将区县数据返回给前端。 最后，根据返回的数据，在前端页面使用JavaScript动态修改区县下拉框的选项，实现三级联动效果。 总结起来，Java Ajax省市区三级联动通过前端页面的交互和后端的数据处理，实现了在用户选择省份、城市和区县时动态加载相应数据的功能。这种开发方式能够提高用户体验，同时满足实际业务需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值