ajax案例之二级联动json版
先上效果图：
前台页面：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>json版二级联动</title>
<script type="text/javascript">
//创建ajax对象
function createAjax(){
try{
return new XMLHttpRequest();// 非IE6浏览器，主流浏览器支持的
}catch(e){
return new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器以下创建的核心对象
}
}
// 加载省份
function loadProvince(){
// 1.创建ajax核心对象
var ajax = createAjax();
// 2.以异步方式发出get请求 true:异步 false:同步
ajax.open("get","/zq/findParentCitys",true);
// 3.监听ajax状态，http响应状态 (注意：必须放在send之前执行)
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){ //ajax已经处理完成并且http响应状态是200
var jsonStr = ajax.responseText;//获取后台返回的json字符串
var jsonArray = JSON.parse(jsonStr);//json字符串转为json对象
var parentEle = document.getElementById("parent");//获取省对应的dom对象
//获取具体的某个json对象
for(var i=0;i<jsonArray.length;i++){
//创建元素
var optionEle = document.createElement("option");//<option></option>
optionEle.value=jsonArray[i].id;//<option value=1></option>
optionEle.innerHTML=jsonArray[i].name;//<option value=1>四川省</option>
parentEle.appendChild(optionEle);//把添加的option元素放到parent对应的dom对象中
}
}
}
// 4.发出请求
ajax.send();
}
//当省份改变的时候，触发该事件
function changeCity(obj){
var pid = obj.value;//获取省份的id
var childEle = document.getElementById("child");//获取子城市的dom对象
if(pid==-1){
childEle.innerHTML="<option value='-1'>请选择</option>";
return;
}
// 1.创建ajax核心对象
var ajax = createAjax();
// 2.以异步方式发出get请求 true:异步 false:同步
ajax.open("get","/zq/findChildCityByPid?id="+pid,true);
// 3.监听ajax状态，http响应状态 (注意：必须放在send之前执行)
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){ //ajax已经处理完成并且http响应状态是200
var jsonStr = ajax.responseText;//获取后台返回的json字符串
var jsonArr = JSON.parse(jsonStr);//把json字符串转为json对象
childEle.innerHTML="";//清空
//获取具体的某个json对象
for(var i=0;i<jsonArr.length;i++){
var optionEle = document.createElement("option");
optionEle.value=jsonArr[i].id;
optionEle.innerHTML=jsonArr[i].name;
childEle.appendChild(optionEle);
}
}
}
// 4.发出请求
ajax.send();
}
loadProvince();
</script>
</head>
<body>
省:<select id="parent" onchange="changeCity(this)">
<option value="-1">请选择</option>
</select>
市:<select id="child">
<option value="-1">请选择</option>
</select>
</body>
</html>后台Controller：
@Controller
public class CityController {
//查找所有的省份
@RequestMapping("/findParentCitys")
@ResponseBody
public List<City> findParentCitys(){
return CityService.findParentCitys();
}
//根据省份的id去找对应的市
@RequestMapping("/findChildCityByPid")
@ResponseBody
public List<City> 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<City> parents = new ArrayList<City>();
private static List<City> childrens = new ArrayList<City>();
/**
* 初始化数据
*/
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<City> findParentCitys(){
return parents;
}
/**
* 根据父级城市id，去找对应的下级城市
* @param pid 父级城市id
*/
public static List<City> findCitysByPid(Long pid){
List<City> citys = new ArrayList<City>();
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<City> citys = findCitysByPid(c.getId());
for (City city : citys) {
System.out.println("=="+city);
}
}
}
}