如何使用SpingMvc实现省市县三级级联？

SpingMvc实现省市县三级级联

文章目录

一、原理分析

二、搭建项目环境

三、实现省市县三级级联代码及代码分析

一、原理分析

实现的原理：我们要做的就是将mysql中省市县的数据通过sql语句查训到页面出来，并使将查询出来的数据返回到前端即页面上，通过观察area表的数据发现，如果查询的parent_code为空的的话，查出来的是省，如果parent_code等于省的code的话查出来的是市，如果parent_code等于市的code的时候，查出来的是县、区

如下例所示，我们查询贵州省的市和县

首先使parent-code为空执行如下sql语句，得到贵州省的code

select * from area where parent_code=""

得到的结果如下所示：

让parent_code等于省的code，查出贵州省下的市，sql语句如下

select * from area where parent_code="520000"

得到的结果如下所示：

让parent_code等于市的code，查出贵阳市下的县、区，sql语句如下

select * from area where parent_code="520100"

从上例我们可以的到，如果我们要实现省、市、县的三级级联的话，点击下图选中请选择省，就能有省份的出现，选择相应的省，会触发一个方法，将省的code赋值给parent_code并同时向后台发送一个请求，查询该省对应的市，并将查询到的数据放区回到页面；同理选择相应的市，也会触发一个方法，将市的code赋值给parent_code并同时向后台发送一个请求，查询该市对应的的县、区，并将查询到的数据返回到页面

二、搭建项目环境

SpringMVC的搭建在另一篇文章里有详细的的介绍，这里就不过加的去赘述

文章链接：https://blog.csdn.net/weixin_42867975/article/details/89816877

本次搭建的项目环境如下所示：拷入的jar包目前只拷入基础的jar包，在运行时出错后再拷入相应的jar包

三、实现省市县三级级联代码及代码分析

前端代码

index.jsp

<script><!--向AreaController发请求，返回areaList.jsp页面和省份-->location.href="./area/cascadeView.do";
</script>

areaList.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%String path = request.getContextPath();pageContext.setAttribute("path",path);
%>
<html>
<head><title>Title</title><script src="${path}/js/jquery-1.8.3.js"></script><script><!--选中相应的省份后,获得相应的省的code,赋值给parentCode,通过parentCode得到对应的市,通过循环追加的方式显示值-->function getCities() {var parentCode = $("#province option:selected").val();<!--在省市县都选完了，要重新选择省的时候，清空县里面的数据-->$("#county").empty();$("#county").append("<option>--请选择县、区--</option>")<!--在选择请选择省的时候，清空请选择市里面的数据-->if(parentCode==""){$("#city").empty();$("#city").append("<option>--请选择市--</option>");return;}var object ={<!--向AreaController发请求-->url:"${path}/area/cascade.do",type:"post",data:"parentCode="+parentCode,success:function(data){var options = "<option value=\"\">--请选择市--</option>";for (var i=0;i<data.length;i++){var city = data[i];options = options + "<option value=\""+city.code+"\">"+city.name+"</option>";console.log(options);}$("#city").empty();$("#city").append(options);}};$.ajax(object);}<!--选中相应的市后，获得相应的市的code,赋值给parentCode，向AreaController发请求，通过parentCode得到对应的县区，通过循环追加的方式显示值-->function getCounties(){var parentCode = $("#city option:selected").val();<!--在省市都选择请选择省/市的时候，清空请选择县里面的数据-->if(parentCode==""){$("#county").empty();$("#county").append("<option>--请选择市--</option>");return;}var object ={url:"${path}/area/cascade.do",type:"post",data:"parentCode="+parentCode,success:function(data){var options = "<option value=\"\">--请选择县、区--</option>";for (var i=0;i<data.length;i++){var county = data[i];options = options + "<option value=\""+county.code+"\">"+county.name+"</option>";}$("#county").empty();$("#county").append(options);}};$.ajax(object);}</script>
</head>
<body><select onchange="getCities() " id="province" ><option value="">--请选择省--</option><!--执行此操作是为了让页面加载出来的时候，数据就已经有，提高用户体验--><c:forEach var="province" items="${provinces}"><option value="${province.code}">${province.name}</option></c:forEach></select><select onchange="getCounties()" id="city"><option value="">--请选择市--</option></select><select id="county"><option value="">--请选择县、区--</option></select>
</body>
</html>

后端代码

AreaController

@Controller
@RequestMapping("/area")
public class AreaController {@Autowiredprivate IAreaService areaService;/*** 处理得到areaList页面和省份数据的请求*/@RequestMapping("/cascadeView.do")public String cascadeView(Map<String,Object> map){map.put("provinces",areaService.cascade(null));return "area/areaList";}/*** 处理得到市、县（区）数据的请求*/@RequestMapping("/cascade.do")@ResponseBodypublic List<Area> cascade(String parentCode, Map<String,Object> map){return areaService.cascade(parentCode);}
}

service层

IAreaService

public interface IAreaService {List<Area> cascade(String parentCode);
}

AreaService

@Service
public class AreaService implements IAreaService {@Autowiredprivate IAreaDao areaDao;public List<Area> cascade(String parentCode){parentCode=parentCode==null?"":parentCode;return areaDao.cascade(parentCode);}
}

Dao层

IAreaDao


public interface IAreaDao {List<Area> cascade(String parentCode);
}

AreaDao

@Repository
public class AreaDao implements  IAreaDao{@Autowiredprivate JdbcTemplate jdbcTemplate;public List<Area> cascade(String parentCode){String sql = "select * from area where parent_code=?";return jdbcTemplate.query(sql, new RowMapper<Area>() {@Overridepublic Area mapRow(ResultSet rs, int i) throws SQLException {return new Area(rs.getString("id"),rs.getString("name"),rs.getString("code"),rs.getString("parent_code"));}},parentCode);}
}

实现效果如下图所示：

如何使用SpingMvc实现省市县三级级联？相关推荐

zTree实现地市县三级级联报错（一）
zTree实现地市县三级级联 1.详细报错例如以下: java.lang.IllegalStateException: Failed to load ApplicationContextat org. ...
省市县三级级联（模块化开发）
不废话,上代码: 先看一下项目列表: tool包里的代码: 请看:tool包 vo.Area类: package com.jd.vo;public class Area {private String ...
全国省市县三级级联SQL数据库内容
创建表 CREATE TABLE [dbo].[City]([id] [INT] NOT NULL,[pid] [INT] NULL,[cityName] [NVARCHAR](50) NULL,[t ...
你要的三级级联我都有
文章目录前言 Ant Design Vue 实现 Element-ui 实现由于业务变动之前做的搜索框变为三级级联,特此记录三级级联前言本文讲述下拉框的三级级联,有 Ant Design Vu ...
java省市县联动下拉框选择_原生JavaScript实现动态省市县三级联动下拉框菜单实例代码...
像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 先给大家展示下测试结果: 未做 ...
字段定义_两大高招逐浪CMS中定义省地市县三级字段显示方式
众所周知,逐浪CMS支持强大的字段定义功能,其中省市县三级字段更是无比强大,可以自由的实现地区的定制,方便web和移动开发者们.这里分享几则技巧. 1.定义省市县三级字段的显示顺序只要点击网站后台快 ...
省市县三级连动（数据在一个表中）
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="省市县三级连接.aspx.c ...
纯JS实现省市县三级下拉联动
纯JS实现省市县三级下拉联动代码如下: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
java生成三级级联的数据,微信小程序三级级联，自定义json数据源
先上效果图 {{province}} {{city}} {{county}} 选择城市取消确定 {{sheng.name}} {{item.name}} {{item.name}} /**inde ...
python省市区三级联动_Ajax实现省市区三级级联详解
本文主要为大家详细介绍了Ajax实现省市区三级级联,数据来自mysql数据库,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 实现Ajax实现省市区三级级联,需要Java解析js ...

如何使用SpingMvc实现省市县三级级联？

SpingMvc实现省市县三级级联

文章目录

如何使用SpingMvc实现省市县三级级联？相关推荐

最新文章

热门文章