java实现省市区三级联动

2024-04-02 19:04:59 596人浏览泡泡鱼

Python 官方文档：入门教程 => 点击学习

摘要

本文实例为大家分享了java实现省市区三级联动的具体代码，供大家参考，具体内容如下我搭建的是SSM 框架：一、实现三级联动以省市区为例：我的想法很简单，可能想的有点少，首先遍

本文实例为大家分享了java实现省市区三级联动的具体代码，供大家参考，具体内容如下

我搭建的是SSM 框架：

一、实现三级联动

以省市区为例：
我的想法很简单，可能想的有点少，首先遍历省份，当数据发生改变调用方法请求根据省的id去查询市区的信息，当市区信息发生改变调用另一个方法去查询县区的信息

1、实体类entity：area

package com.htzn.entity;

public class Area {
    
    private String id ;
    
    private String name;
    
    private String pid;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPid() {
        return pid;
    }

    public void setPid(String pid) {
        this.pid = pid;
    }
}

2、接口层 dao

package com.htzn.dao;

import java.util.List;

import com.htzn.entity.Area;

public interface AreaDao {
    
    //获取省的信息
    public List<Area> getProvince();
    
    //获取市区信息
    public List<Area> getCity(Integer pid);
    
    //获取所有县区信息
    public List<Area> getArea(Integer pid);
    

}

3、接口service层，（个人觉得两个接口层公用一个也行，就像那种公用一个的改为mapper接口层那种的也很方便，可能这样比较不规范吧）

package com.htzn.service;

import java.util.List;
import com.htzn.entity.Area;

public interface AreaService {
    
    public List<Area> getProvince();
    public List<Area> getCity(Integer pid);
    public List<Area> getArea(Integer pid);
    

}

4、接口实现类serviceImpl

package com.htzn.serviceImpl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.htzn.dao.AreaDao;
import com.htzn.entity.Area;
import com.htzn.service.AreaService;

@Service
public class AreaServiceImpl implements AreaService {

    @Autowired
    AreaDao areadao;
    
    @Override
    public List<Area> getProvince() {
        // TODO Auto-generated method stub
        return areadao.getProvince();
    }

    @Override
    public List<Area> getCity(Integer pid) {
        // TODO Auto-generated method stub
        return areadao.getCity(pid);
    }

    @Override
    public List<Area> getArea(Integer pid) {
        // TODO Auto-generated method stub
        return areadao.getArea(pid);
    }

}

5、控制器：contoller

package com.htzn.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.WEB.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.htzn.dao.AreaDao;
import com.htzn.entity.Area;

@Controller
public class AreaController {

    //自动注入
    @Autowired
    AreaDao areadao;
    //获取省份映射到页面
    @RequestMapping("/getpervice")
    public String privce(Model model) {
        List<Area> list = areadao.getProvince();
        model.addAttribute("province", list);
        return "arealist";
    }
    //根据省份id获取对应市区
    @ResponseBody
    @RequestMapping("/getcity")
    public List<Area> city(@RequestParam(value="pid",required=false) Integer id) {
        List<Area> city = areadao.getCity(id);
        return city;
    }
    //根据市区id获取相应的县区
    @ResponseBody
    @RequestMapping("/getarea")
    public List<Area> area(@RequestParam(value="pid",required=false) Integer id) {
        List<Area> area = areadao.getArea(id);
        return area;
    }
}

6、最后映射页面：jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="Http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fm"%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
　　<script src="https://code.Jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>

 省： 
 <select name="province" id="province"  onchange="changeCity()">
<c:forEach items="${province }" var="list">
    <option value="${list.id }" >${list.name }</option>
 </c:forEach>
     
 </select> 
  市：
 <select id="city" name="city" onchange="changeDistrict()">
      <option value="">-- 请选择市 --</option>
 </select>
  区（县）：
<select id="district" name="district" onchange="changehidden()">
      <option value="">-- 请选择县(区) --</option>
</select> -->
</body>
<script type="text/javascript">
    function changeCity(){
        //当省的内容发生变化的时候，响应的改变省的隐藏域的值
        $("#phidden").val($("#province option:selected").html());
        //页面加载完成，将省的信息加载完成
        //下拉列表框标签对象的val()方法就是选中的option标签的value的属性值
        var pid = $("#province").val();
        alert(pid);
        $.ajax({
            url:"/sky-ssm/getcity",
            type:'post',
            data:{"pid":pid},
            dataType: "JSON",
            success:function(data){
                //清空城市下拉列表框的内容
                $("#city").html("<option value=''>-- 请选择市 --</option>");
                $("#district").html("<option value=''>-- 请选择区/县 --</option>");
                //遍历json，json数组中每一个json，都对应一个省的信息，都应该在省的下拉列表框下面添加一个<option>
                for(var i=0;i<data.length;i++){
                    var $option = $("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
                    $("#city").append($option);
                }
            },
            error:function(data){
                alert("失败了");
            }
        });
    }

    function changeDistrict(){
        //当城市的内容发生变化的时候，相应的改变城市的隐藏域的值
        $("#chidden").val($("#city option:selected").html());
        //页面加载完成，将省的信息加载完成
        //下拉列表框标签对象的val()方法就是选中的option标签的value的属性值
        var pid = $("#city").val();
        $.ajax({
            url:"/sky-ssm/getarea",
            data:{"pid":pid},
            dataType:"json",
            success:function(data){
                //清空城市下拉列表框的内容
                $("#district").html("<option value=''>-- 请选择区/县 --</option>");
                for(var i=0;i<data.length;i++){
                    var $option = $("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
                    $("#district").append($option);
                }
            }
        });
    }

    function changehidden(){
        //当城市的内容发生变化的时候，相应的改变城市的隐藏域的值
        $("#dhidden").val($("#district option:selected").html());
    }
</script>
</html>

7、mapper.xml文件：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.htzn.dao.AreaDao">
  <resultMap id="BaseResultMap" type="com.htzn.entity.Area">
    <!--
      WARNING - @mbg.generated
      This element is automatically generated by MyBatis Generator, do not modify.
      This element was generated on Thu Jan 09 17:01:48 CST 2020.
    -->
    <id column="id" jdbcType="VARCHAR" property="id" />
    <result column="name" jdbcType="VARCHAR" property="name" />
    <result column="pid" jdbcType="VARCHAR" property="pid" />
  </resultMap>
  <sql id="Base_Column_List">
    <!--
      WARNING - @mbg.generated
      This element is automatically generated by MyBatis Generator, do not modify.
      This element was generated on Thu Jan 09 17:01:48 CST 2020.
    -->
    id, name, pid
  </sql>
  
    <select id="getProvince"  resultMap="BaseResultMap">
  
    select 
    <include refid="Base_Column_List" />
    from area 
    where pid = 0
    
  </select>
  
      <select id="getCity"  resultMap="BaseResultMap">
  
    select 
    <include refid="Base_Column_List" />
    from area 
    where pid = #{pid}
    
  </select>
  
  <select id="getArea"  resultMap="BaseResultMap">
  
    select 
    <include refid="Base_Column_List" />
    from area 
    where pid = #{pid}
    
  </select>
 
  <select id="selectByPrimaryKey" parameterType="java.lang.Integer" resultMap="BaseResultMap">
    <!--
      WARNING - @mbg.generated
      This element is automatically generated by MyBatis Generator, do not modify.
      This element was generated on Thu Jan 09 17:01:48 CST 2020.
    -->
    select 
    <include refid="Base_Column_List" />
    from dept
    where id = #{id,jdbcType=INTEGER}
  </select>

</mapper>

因为就是测试可不可行直接写的select下拉框，结果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

您可能感兴趣的文档:

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: java实现省市区三级联动

本文链接: https://www.lsjlt.com/news/152408.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

java实现省市区三级联动

本文实例为大家分享了java实现省市区三级联动的具体代码，供大家参考，具体内容如下我搭建的是SSM 框架：一、实现三级联动以省市区为例：我的想法很简单，可能想的有点少，首先遍...

99+

2022-11-13
Ajax实现省市区三级联动

目录需要的jar包：数据库代码：省：市：区：页面展示代码：DBHelper类：总结需要的jar包：数据库代码： create database school charact...

99+

2022-11-12
Ajax如何实现省市区三级级联

这篇文章主要介绍Ajax如何实现省市区三级级联，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！实现Ajax实现省市区三级级联，需要Java解析json技术整体Demo下载地址如下: 点我下载address.html&...

99+

2023-06-08
Ajax实现省市区三级联动实例代码

html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...

99+

2022-11-13
Vue自定义省市区三级联动

本文实例为大家分享了Vue自定义省市区三级联动的具体代码，供大家参考，具体内容如下 1.如图（省市区加上全部联动）第一步:找到了一个普通的省市区先进行遍历更改 2.把更改后的js...

99+

2022-11-13
js实现简单省市区三级选择联级

本文实例为大家分享了js实现省市区三级选择联级的具体代码，供大家参考，具体内容如下代码： <!DOCTYPE html> <html lang="en"&g...

99+

2022-11-12
AJAX实现省市县三级联动效果

最近在学AJAX做到这个省市县三级联动的案例，这里只是讲一下ajax请求的一些知识，对服务端数据.php文件就不叙述了。（tips:其实省市县三级联动只需要引入jQuery省市县三...

99+

2022-11-12
ajax实现三级联动省市的代码

本篇内容主要讲解“ajax实现三级联动省市的代码”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“ajax实现三级联动省市的代码”吧!目录创建数据库首先创建 City 和 Province 类给g...

99+

2023-06-20
js实现省市区三级联动非select下拉框版

在网上搜三级联动发现都是用option写的，突发奇想用其他方式写了一个，自我感觉效果还不错，大家感兴趣的可以看看，不说废话，大家看效果代码如下，小白写的有点乱，大家想看的就看...

99+

2022-11-12
Vue如何实现省市区三级联动el-select组件

这篇文章主要介绍“Vue如何实现省市区三级联动el-select组件”，在日常操作中，相信很多人在Vue如何实现省市区三级联动el-select组件问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vu...

99+

2023-07-05
利用级联选择器实现省市区三级联动【vue + elementUI Plus | uViewUI】

文章目录准备数据vue + ElementUI Plus 利用级联选择器实现省市区三级联动学习记录具体代码 vue + uViewUI 利用选择器多列联动实现省市区三级联动 (uniapp学习记录具体代码准备数据 ...

99+

2023-08-19

vue.js elementui javascript 小程序前端
三级联动省市ajax的代码

目录创建数据库首先创建 City 和 Province 类给getter setter tostring 以及构造方法 Province类City类连接数据库创建接口 Prov...

99+

2022-11-12
Android使用android-wheel实现省市县三级联动

今天没事跟群里面侃大山，有个哥们说道Android Wheel这个控件，以为是Andriod内置的控件，google一把，发现是个github上的一个控件。下载地址：http...

99+

2022-06-06

wheel 级联 Android
AJAX和WebService如何实现省市县三级联动

小编给大家分享一下AJAX和WebService如何实现省市县三级联动，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ ...

99+

2022-10-19
vue实现省市区的级联选择

最近要实现一个省市区级联选择效果，省市区的数据都是使用的本地数据，实现起来逻辑会有一点复杂，我在这里列举PC端的总结分享一下，移动端的代码也是差不多的，除了html之外，其它的可以复...

99+

2022-11-12
ajax如何实现无刷新省市县三级联动

这篇文章主要介绍“ajax如何实现无刷新省市县三级联动”，在日常操作中，相信很多人在ajax如何实现无刷新省市县三级联动问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”ajax如何实现无刷新省市县三级联动”的疑...

99+

2023-06-08
使用JavaScript怎么实现一个省市区三级选择联级

这期内容当中小编将会给大家带来有关使用JavaScript怎么实现一个省市区三级选择联级，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。JavaScript可以做什么1.可以使网页具有交互性，例如响应用户点...

99+

2023-06-14
java后端实现省市区三级联动接口查询及数据库表下

java后端实现省市区三级联动接口查询及数据库表 1、创建数据库 INSERT INTO t_city VALUES ('10003310', '652828', '和硕县', '10000368',...

99+

2023-09-04

数据库 mysql sql
Android省市区三级联动控件使用方法实例讲解

　最近有需求需要实现省市区三级联动，但是发现之前的实现不够灵活，自己做了一些优化。为了方便以后使用，抽离出来放在了github上WheelView。同时把其核心库放在了JCen...

99+

2022-06-06

方法级联 Android
Vue使用distpicker插件实现省市级下拉框三级联动

目录前言安装distpicker引用并注册distpicker使用distpicker移动端适配美化样式取值总结前言这几天做项目，想着用一个全国省市区插件，之前就知道有几种，比如通...

99+

2023-02-22

Vue省市级下拉框三级联动 Vue使用distpicker插件 vue三级联动