基于ssm实现省市县三级级联查询

基于ssm实现省市县三级级联查询

一、实现效果图

二、表结构

三、数据库SQL下载地址如下：
https://download.csdn.net/download/m0_46629316/18970085

四、前端页面代码以及Ajax
1.页面代码

<div style="margin: 100px auto; border: 2px soild">
		<label>省：</label>
		<select id="province" style="width: 120px;height: 30px;border: 1px solid red; border-radius: 4px;">
		</select>
		<label>市：</label>
		<select id="city" style="width: 120px;height: 30px;border: 1px solid red; border-radius: 4px;"></select>
		<label>区（县）：</label>
		<select id="area" style="width: 120px;height: 30px;border: 1px solid red; border-radius: 4px;"></select>
</div>

2.js代码

<script type="text/javascript">
$(document).ready(function () {
    getprovince();//网页加载完成时自动执行 此方法 
     $("#province").change(function () {//表示id="province"的标签中的值改变时调用此方法
    	getcity($(this).val());
    });
    $("#city").change(function () {//以上同理
    	getarea($(this).val());
    }); 
    function getprovince(){//使用ajax获取后台返回的数据
        $.ajax(
        {
            type:"post",//规定请求的类型（GET 或 POST）。
            url:"/springboot/getCity",//规定发送请求的 URL。默认是当前页面。
            async:true,	//表示请求是否异步处理。默认是 true。
            dataType:"json",//默认类型也为json格式
            success: function (data) {//data:代表返回的数据
            	//alert(data)
                $.each(data,function(n,item){
                    var option=$("<option></option>");//设置option标签
                    option.val(item.id);//设置option标签中的value值为数据库表中id字段中的值
                    option.text(item.name);//设置option标签中的text值为数据库表中name字段中的值
                    option.appendTo($("#province"));//将 option添加到id为province标签的结尾（仍然在内部
                });
            	//alert($("#province").val());
                getcity($("#province").val());//调用getcity方法，并插入参数$("#province").val()(即：id字段中的值)
           }
        }
        );
    }
    function getcity(id){
         $("#city").empty();//清空之前的数据
         $.ajax({
         	type:"get",
         	url:"/springboot/getCity?id="+id,
         	data:{
 				flag:"city"//向服务器发送flag：作为标志字段
 			},
         	success:function(data){
         		$.each(data,function(n,item){
             var option=$("<option></option>");
             option.val(item.id);
             option.text(item.name);
             option.appendTo($("#city"));
             });
         	 //alert($("#city").val());
              getarea($("#city").val());
         	}
         });
    }  
    function getarea(id){
    	$("#area").empty();
        $.ajax( { 
        	type:"get",
   			url:"/springboot/getCity?id="+parseInt(id),//将数据转成int 类型
   			data:{
   				flag:"area"
   			},
               success: function (data) {
                   $.each(data,function(n,item){
                       var option=$("<option></option>");
                       option.val(item.id);
                       option.text(item.name);
                       option.appendTo($("#area"));
                   });
               }
           }
        );
    } 
});
</script>

（注：自行导包）

五、后端Java代码逻辑及实现
1.mapper接口

/**
 * 根据id进行查询
 * @param id
 * @return
 */
public List<City> getAreaByParentno(Integer id);

2.service层

/**
 * 根据id进行查询
 * @param id
 * @return
 */
public List<City> getAreaByParentno(Integer id);

3.serviceImpl层

@Override
public List<City> getAreaByParentno(Integer id) {
		// TODO Auto-generated method stub
		return cityMapper.getAreaByParentno(id);
	}

4.controller层

@RequestMapping(value = "/getCity",produces = "application/json;charset=utf-8")
	public void getCity(HttpServletRequest request, HttpServletResponse response) {
		//getParameter是用来获取URL中的参数的
		String flag = request.getParameter("flag");
		String id = request.getParameter("id");
		if (flag == null && id == null) {
			this.province(request, response);
		} else {
			if (flag.equals("city")) {
				city(request, response, Integer.parseInt(id));
				//Integer.valueOf(id)将String强转为int类型
			} else {
				if(flag.equals("area")){
					area(request, response, Integer.parseInt(id));
				}
			}
		}
	}
	// 一级查询---输出（name,id）
	@ResponseBody
	public void province(HttpServletRequest request, HttpServletResponse response) {
		ModelAndView view = new ModelAndView();
		List<City> list = cityServiceImpl.getAreaByParentno(0);
		//设置以json格式响应，并设置编码类型防止数据传递乱码
		response.setContentType("application/json;charset=utf-8");
		/*
		 * try { System.out.println(JSONObject.toJSONString(list));
		 * //响应信息通过out对象输出到网页上，当响应结束时它自动被关闭，与jsp页面无关，无需刷新页面
		 * //write()：仅支持输出字符类型数据，字符、字符数组、字符串等
		 * response.getWriter().write(JSONObject.toJSONString(list)); } catch
		 * (IOException e) { e.printStackTrace(); }
		 */
		view.addObject("list", list);
		try {
			response.getWriter().write(JSONObject.toJSONString(list));
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

	// 二级查询---输出（name,id）---根据id查询
	@ResponseBody
	public void city(HttpServletRequest request, HttpServletResponse response, int id) {
		ModelAndView view = new ModelAndView();
		//List<Area> list = areaService.getAreaByParentno("code",0, number);
		List<City> list = cityServiceImpl.getAreaByParentno(id);
		//设置以json格式响应，并设置编码类型防止数据传递乱码
		response.setContentType("application/json;charset=utf-8");
		/*
		 * try { response.getWriter().write(JSONObject.toJSONString(list)); } catch
		 * (IOException e) { e.printStackTrace(); }
		 */
		view.setViewName("city");
		try {
			response.getWriter().write(JSONObject.toJSONString(list));
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
		
	// 三级查询----输出（name,id）---根据id查询
	@ResponseBody
	public void area(HttpServletRequest request, HttpServletResponse response, int id) {
		ModelAndView view = new ModelAndView();
		List<City> list = cityServiceImpl.getAreaByParentno(id);
		response.setContentType("application/json;charset=utf-8");
		/*
		 * try { response.getWriter().write(JSONObject.toJSONString(list)); } catch
		 * (IOException e) { e.printStackTrace(); }
		 */
		view.setViewName("city");
		try {
			response.getWriter().write(JSONObject.toJSONString(list));
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

5.mapper.xml

<select id="getAreaByParentno" resultType="city" parameterType="java.lang.Integer" >
    select * from city
    <where>
    	<if test="value != 0">
    		id &lt;&gt; ${value} and parent_id = ${value}
    	</if>
    	<if test="value == 0">
    		parent_id = ${value}
    	</if>
    </where>
</select>

5.依赖文件pom.xml

<dependency>
	<groupId>com.google.code.gson</groupId>
	<artifactId>gson</artifactId>
</dependency>
<dependency>
	<groupId>com.alibaba</groupId>
	<artifactId>fastjson</artifactId>
	<version>1.2.9</version>
</dependency>

这样就可以实现啦！！！！！
欢迎前来观赏！！！你们的支持是我的动力。。。。