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

两个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 findAllProvince() {
		
		String sql = "select * from t_province";
		try {
			return qr.query(sql, new BeanListHandler(Province.class));
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return null;
	}
	
	/**
	 * 根据pname返回city的list集合
	 * @param pname
	 * @return
	 */
	public List 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.class),pname);
			return qr.query(sql2, new BeanListHandler(City.class),province.getPid());
		} catch (SQLException e) {
			e.printStackTrace();
		}
		
		return null;
	}
	
	
	
}

service层:

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

	/**
	 * 查询所有的省
	 * @return
	 */
	public List findAllProvince() {
		return proCityDao.findAllProvince();
	}
	
	/**
	 * 根据pname返回city的list集合
	 * @param pname
	 * @return
	 */
	public List 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 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 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"%>











	===请选择省===

    

	===请选择市===