使用json和ajax来实现省市联动

最新推荐文章于 2023-08-02 09:33:32 发布

灵泽~

最新推荐文章于 2023-08-02 09:33:32 发布

阅读量3.4k

点赞数 3

分类专栏： java 生态圈文章标签： java ajax json

本文链接：https://blog.csdn.net/qq_38263083/article/details/82115317

版权

java 生态圈专栏收录该内容

46 篇文章 0 订阅

订阅专栏

两个javaBean（Province和city，在数据库中city通过外键pid来关联province）

数据库：（province）

(city)

city通过pid外键来关联province

bean代码：



public class City {
	private int cid;
	private String name;
	private int  pid;
	
	
	public int getCid() {
		return cid;
	}
	public void setCid(int cid) {
		this.cid = cid;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getPid() {
		return pid;
	}
	public void setPid(int pid) {
		this.pid = pid;
	}
	public City(int cid, String name, int pid) {
		super();
		this.cid = cid;
		this.name = name;
		this.pid = pid;
	}
	public City() {
		super();
		// TODO Auto-generated constructor stub
	}
	@Override
	public String toString() {
		return "City [cid=" + cid + ", name=" + name + ", pid=" + pid + "]";
	}
	
	
	
	
}

public class Province {
	
	private int pid;
	private String name;
	
	public int getPid() {
		return pid;
	}
	public void setPid(int pid) {
		this.pid = pid;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Province(int pid, String name) {
		super();
		this.pid = pid;
		this.name = name;
	}
	public Province() {
		super();
		// TODO Auto-generated constructor stub
	}
	
	
	@Override
	public String toString() {
		return "Province [pid=" + pid + ", name=" + name + "]";
	}
	
	
}

dao层:

public class ProCityDao {
	
	private QueryRunner qr = new QueryRunner();
	
	/**
	 * 查询所有的省
	 * @return
	 */
	public List<Province> findAllProvince() {
		
		String sql = "select * from t_province";
		try {
			return qr.query(sql, new BeanListHandler<Province>(Province.class));
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return null;
	}
	
	/**
	 * 根据pname返回city的list集合
	 * @param pname
	 * @return
	 */
	public List<City> findCityByProvinceName(String pname){
		String sql1 = "select pid from t_province where name=?";
		String sql2 = "select name from t_city where pid=?";
		try {
			Province province = qr.query(sql1, new BeanHandler<Province>(Province.class),pname);
			return qr.query(sql2, new BeanListHandler<City>(City.class),province.getPid());
		} catch (SQLException e) {
			e.printStackTrace();
		}
		
		return null;
	}
	
	
	
}

service层:

public class ProCityService {
	private ProCityDao proCityDao = new ProCityDao();
	

	/**
	 * 查询所有的省
	 * @return
	 */
	public List<Province> findAllProvince() {
		return proCityDao.findAllProvince();
	}
	
	/**
	 * 根据pname返回city的list集合
	 * @param pname
	 * @return
	 */
	public List<City> findCityByProvinceName(String pname){
		return proCityDao.findCityByProvinceName(pname);
	}
	
}

web.servlet层：

(1)cityServlet:

public class CityServlet extends HttpServlet {

	private ProCityService proCityService = new ProCityService();
	@Override
	public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
	
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");
	
		//得到所选择的省
		String pname = req.getParameter("pname");
		
		List<City> list = proCityService.findCityByProvinceName(pname);
		String str = JSONArray.fromObject(list).toString();
		resp.getWriter().write(str);
		
	}
	
}

(2)provinceSercvlet：

public class ProvinceServlet extends HttpServlet {
	private ProCityService proCityService = new ProCityService();
	
	@Override
	public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");
		
		List<Province> list = proCityService.findAllProvince();
		String str = JSONArray.fromObject(list).toString();
		resp.getWriter().write(str);
	}
	
	
}

jsp页面代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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>
<script type="text/javascript">
window.onload = function () {
	var xmlRequest = new XMLHttpRequest();
	xmlRequest.open("get","<c:url value='/ProvinceServlet' />",true);
	xmlRequest.send(null);
	xmlRequest.onreadystatechange = function () {
		if(xmlRequest.readyState == 4 && xmlRequest.status == 200){
			var pro = document.getElementById("province");
			
			var json = xmlRequest.responseText;
			var js = eval("("+json+")");
			for (var i = 0; i < js.length; i++) {
				var op = document.createElement("option");
				op.value = js[i].name;
				var text = document.createTextNode(js[i].name);
				op.appendChild(text);
				pro.appendChild(op);
			}
			
			/* 如果省市发生改变 */
			province.onchange = function () {
				/* 遍历整个province中的option对象判断是否别选中 */
				for (var i =0; i < province.options.length; i++) {
					if(province.options[i].selected == true){
						var text = province.options[i].textContent;
						dealCity(text);
					}
				}
			};
			
		}
	};
};


function dealCity(pname) {
	var xmlRequest = new XMLHttpRequest();
	xmlRequest.open("post","<c:url value='/CityServlet' />",true);
	xmlRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xmlRequest.send("pname="+pname);
	
	xmlRequest.onreadystatechange = function () {
		if(xmlRequest.readyState == 4 && xmlRequest.status == 200){
			var city = document.getElementById("city");
			var json = xmlRequest.responseText;
			var js = eval("("+json+")");
			
			var size = city.options.length;
			//清除上次的城市选项
			if(size > 1){
				for (var i = 1; i < size; i++) {
					var ele = city.options[1];
					city.removeChild(ele);
				}
			}
			
			
			
			for (var i = 0; i < js.length; i++) {
				var op = document.createElement("option");
				op.value = js[i].name;
				var text = document.createTextNode(js[i].name);
				op.appendChild(text);
				city.appendChild(op);
			}
			
		}
		
	};
};

</script>

</head>
<body>

<select id="province">
	<option>===请选择省===</option>
</select>
    
<select id="city">
	<option>===请选择市===</option>
</select>

</body>
</html>

灵泽~

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
使用json和ajax来实现省市联动

两个javaBean（Province和city，在数据库中city通过外键pid来关联province）数据库：（province）(city)city通过pid外键来关联provincebean代码：public class City { private int cid; private String name; private int pid; ...
复制链接

扫一扫