ajax前后台交互实现省市区级联

1.html代码

	所在地址：
	

	
		
			
				请选择
				
				<#list provinces as province>
		    		selected="selected" value="${province.id}">${province.placeZh}
	    		
			
		

		
			
				<#if area?? >
					${area.city.placeZh}
				<#else>
					请选择
				
			
		

		
			
				<#if area??>
					${area.county.placeZh}
				<#else>
					请选择
				
			
		
		
	

2.js代码

//通过省份ID查询查询所有的城市信息
function select_citys(obj){
	var provinceId = $(obj).val();
	if(!provinceId)return; // 声明变量就要判断是否为null
	$.ajax({
		type:"post",//请求方式get/post
		url:"/area/findAllArea",//请求对应的地址
		data:{"areaCode":provinceId},//往服务器传递的参数，
		success:function(data){//服务器交互成功调用的回调函数，data就是服务器端传递出来的数据
			var jdata = data.data; // 去前后空格
			if( data.code != 200){
				//查询失败!
			}else{
				var jsonData = eval(jdata);//将字符串的json对象转换成json
				$("#area").html("-请选择-");
				append_template(jsonData,"city");
			}
		}
	});
};
		
//通过省份ID查询查询所有的地区信息
function select_areas(obj){
	var cityId = $(obj).val();
	if(!cityId)return;
	$.ajax({
		type:"post",
		url:"/area/findAllArea",
		data:{"areaCode":cityId},
		success:function(data){
			var jdata = data.data;
			if( data.code != 200){
				//查询失败
			}else{
				var jsonData = eval(jdata);
				append_template(jsonData,"area");
			}
		}
	});
};
		
//封装其通用内容
function append_template(jsonData,target){
	var length = jsonData.length;
	var html = "-请选择-";
	for(var i=0;i"+jsonData[i].placeZh+"";
	}
	$("#"+target).html(html);
};

3.后台代码

@RequestMapping(value = "/area")
@RestController
public class AreaAPIController extends BaseController {

	@Autowired
	private AreaService areaService;

	@RequestMapping("/findAllArea")
	@ResponseBody
	public Result findAllArea(@RequestParam(required=false) Long areaCode) {
		List list = new ArrayList();
		try {
			if (null == areaCode) {
				//如果为空则查所有的省
				list = areaService.listAllProvince();
			} else {
				//不为空则根据父id查下面的所有子项
				list = areaService.listByParentId(areaCode);
			}
			return buildDataResult(list);
		} catch (BizException e) {
			return buildExceptionResult(e);
		}
	}
}

ps：首先进入页面加载所有的省份，并将已经存在的省市区加载在上面。省修改后添加城市信息，并把区域信息删除，加上“请选择”的option的标签；市修改后添加区域信息。