java实现省市区三级联动

一、实现三级联动

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

1、实体类entity：area

扫描二维码关注公众号，回复： 15702179 查看本文章

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="Oracle Java Technologies | Oracle" prefix="c"%>

<%@ taglib uri="Oracle Java Technologies | Oracle" prefix="fn"%>

<%@ taglib uri="Oracle Java Technologies | Oracle" 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>

java实现省市区三级联动

一、实现三级联动

猜你喜欢