JavaScript(10) ajax案例之二级联动json版

先上效果图：

前台页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>


	 
		
		
		
	
	
		省:
			 请选择
		   
		市:
			 请选择
		   
	

后台Controller：

@Controller
public class CityController {
	
	//查找所有的省份
	@RequestMapping("/findParentCitys")
	@ResponseBody
	public List findParentCitys(){
		return CityService.findParentCitys();
	}
	
	//根据省份的id去找对应的市
	@RequestMapping("/findChildCityByPid")
	@ResponseBody
	public List findChildCityByPid(Long id){
		return CityService.findCitysByPid(id);
	}
	
	//方式一：手动拼接json对象
	@RequestMapping("/01")
	@ResponseBody
	public void returnJson01(HttpServletResponse response) throws IOException{
		response.setContentType("text/json;charset=UTF-8");
		response.getWriter().print("{\"id\":1,\"name\":\"张三\"}");
	}
	
	//方式二：利用工具类自动返回json对象
	@RequestMapping("/02")
	@ResponseBody
	public void returnJson02(HttpServletResponse resp) throws IOException{
		resp.setContentType("text/json;charset=UTF-8");
		City city = new City(2L, "成都市", new City(1L, "四川省", null));
		JSON json = JSONSerializer.toJSON(city);
		resp.getWriter().print(json.toString());
	}
	
}

bean类：

public class City {
	private Long id;//城市id
	private String name;//城市名
	private City parent;//父级城市
	public City() {}
	public City(Long id, String name, City parent) {
		super();
		this.id = id;
		this.name = name;
		this.parent = parent;
	}
	public Long getId() {
		return id;
	}
	public void setId(Long id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public City getParent() {
		return parent;
	}
	public void setParent(City parent) {
		this.parent = parent;
	}
	@Override
	public String toString() {
		return "City [id=" + id + ", name=" + name + "]";
	}
}

准备数据：

public class CityService {
	
	private static List parents = new ArrayList();
	private static List childrens = new ArrayList();
	
	/**
	 * 初始化数据
	 */
	static{
		Long id= 1L;
		City parentCity1 = new City(id++,"四川省",null);
		parents.add(parentCity1);
		
		City city = new City(id++,"都江堰市",parentCity1);
		childrens.add(city);
		city = new City(id++,"成都市",parentCity1);
		childrens.add(city);
		city = new City(id++,"绵阳市",parentCity1);
		childrens.add(city);
		city = new City(id++,"内江市",parentCity1);
		childrens.add(city);
		city = new City(id++,"德阳市",parentCity1);
		childrens.add(city);
		
		City parentCity2 = new City(id++,"广东省",null);
		parents.add(parentCity2);
		
		city = new City(id++,"东莞市",parentCity2);
		childrens.add(city);
		city = new City(id++,"广州市",parentCity2);
		childrens.add(city);
		city = new City(id++,"佛山市",parentCity2);
		childrens.add(city);
		city = new City(id++,"深圳市",parentCity2);
		childrens.add(city);
	}
	
	/**
	 * 获取父级城市
	 * @return
	 */
	public static List findParentCitys(){
		return parents;
	}
	
	/**
	 * 根据父级城市id，去找对应的下级城市
	 * @param pid  父级城市id
	 */
	public static List findCitysByPid(Long pid){
		List citys = new ArrayList();
		for (City city : childrens) {
			if(city.getParent().getId().equals(pid)){
				citys.add(city);
			}
		}
		return citys;
	}
	
	public static void main(String[] args) {
		for (City c : findParentCitys()) {
			System.out.println(c);
			List citys = findCitysByPid(c.getId());
			for (City city : citys) {
				System.out.println("=="+city);
			}
		}
	}
	
}