简单实现全国省市县三级联动（数据库）

最新推荐文章于 2021-01-20 02:33:13 发布

꧁ 陽 ꧂

最新推荐文章于 2021-01-20 02:33:13 发布

阅读量903

点赞数

文章标签： json servlet jsp

本文链接：https://blog.csdn.net/qq_44129874/article/details/108644615

版权

province.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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>
</head>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript">

	function province(){
		var pid=$("#provinces").val();//获取省的id
		$.ajax({
			url:"http://127.0.0.1:8080/js/city?pid="+pid+"",//传回去个sid
			dataType:"JSON",//服务端传回来的数据类型
			success:function(data){//成功的话执行这个方法
				var city=eval(data);//将传回来的json字符串传成json对象
				$("#city").empty();//城市的下拉框清空
				$("#county").empty();//县区的下拉框清空
				$("#city").append("<option>-请选择地市-</option>");//清空后追加下拉框
				$("#county").append("<option>-请选择县区-</option>");
				for(var i=0;i<city.length;i++){//循环json对象
					var option=$("<option value="+city[i].cid+">"+city[i].cname+"</option>");
					$("#city").append(option);//追加下拉框
				}
			},
			error:function(data){//不成功的话，执行这个方法
				alert("失败了");
			}
		});
	}
	function city(){
		var cid=$("#city").val();
		console.log(cid);
		$.ajax({
			url:"http://127.0.0.1:8080/js/county?cid="+cid+"",
			dataType:"JSON",
			success:function(data){
				var county=eval(data);//json字符串转换成json对象
				$("#county").empty();
				$("#county").append("<option>-请选择县区-</option>");
				for(var i in county){
					var option=$("<option value="+county[i].xid+">"+county[i].xname+"</option>");
					$("#county").append(option);
				}
			},
			error:function(data){
				alert("失败了 ");
			}
		});
	}
		
</script>
<body>
	
	<select id="provinces" onchange="province()" >
		<option>-请选择省份-</option>
		<!--forEach循环传过来的集合 -->
		<c:forEach items="${provinces }" var="provinces">
		<option value="${provinces.sid}">${provinces.sname}</option>
		</c:forEach>
	</select>省
	
	<select id="city" onchange="city()">
		<option>-请选择地市-</option>
	</select>市
	
	<select id="county" >
		<option>-请选择县区-</option>
	</select>县（区）

</body>
</html>

controller

package controller;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;

import dao.CityDaoImpl;
/**
 * 通过省id查询到所有的市
 * @author ꧁ 陽 ꧂
 *
 */
@WebServlet("/city")
public class City extends HttpServlet {
	
	private static final long serialVersionUID = 1L;
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.getProtocol();
		//设置浏览器格式
		resp.setContentType("text/html;charset=utf-8");
		//获取通过ajax传过来的id值
		String pid = req.getParameter("pid");
		//查询所有的市
		CityDaoImpl dao = new CityDaoImpl();
		List<pojo.City> city = dao.getCity(pid);
		//把集合转换成json字符串，再写出去
		String jsoncity = JSON.toJSONString(city);
		resp.getWriter().write(jsoncity);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
}
package controller;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;

import dao.CityDaoImpl;
import pojo.City;
/**
 * 获取所有的县
 * @author ꧁ 陽 ꧂
 *
 */
@WebServlet("/county")
public class County extends HttpServlet {
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.getProtocol();
		//设置浏览器编码格式
		resp.setContentType("text/html;charset=utf-8");
		//获取ajax用get（）传过来的id
		String cid = req.getParameter("cid");
		System.out.println(cid);
		//调用查询方法，查出所有的县
		CityDaoImpl dao=new CityDaoImpl();
		List<City> county = dao.getCounty(cid);
		//把集合转化成json对象，写出去
		String jsonid = JSON.toJSONString(county);
		resp.getWriter().write(jsonid);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
}
package controller;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import dao.CityDaoImpl;
import pojo.City;
/**
 * 查询所有的省份
 * @author ꧁ 陽 ꧂
 *
 */
@WebServlet("/province")
public class Province extends HttpServlet {

	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.getProtocol();
		//查询所有的省份
		CityDaoImpl dao=new CityDaoImpl();
		List<City> provinces = dao.getProvinces();
		req.setAttribute("provinces",provinces );
		//转发到jsp界面
		req.getRequestDispatcher("/province.jsp").forward(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
}