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

1.html代码

<div class="row cl">
	<label class="form-label col-xs-4 col-sm-3">所在地址：</label>
	<div class="content">
	
		<span class="select-box pl-10" style="width:110px">
			<select id="province" class="select" οnchange="select_citys(this)">
				<option  value = "">请选择</option>
				<!-- 循环显示所有省份 -->
				<#list provinces as province>
		    		<option <#if area?? && area.province.id == province.id>selected="selected"</#if> value="${province.id}">${province.placeZh}</option>
	    		</#list>
			</select>
		</span>

		<span class="select-box pl-10" style="width:110px">
			<select id="city" class="select" οnchange="select_areas(this)">
				<#if area?? >
					<option value = "${area.city.id}">${area.city.placeZh}</option>
				<#else>
					<option value = "">请选择</option>
				</#if>
			</select>
		</span>

		<span class="select-box pl-10" style="width:110px">
			<select id="area" class="select">
				<#if area??>
					<option value = "${area.county.id}">${area.county.placeZh}</option>
				<#else>
					<option value = "">请选择</option>
				</#if>
			</select>
		</span>
		
	</div>
</div>

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("<option>-请选择-</option>");
				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 = "<option>-请选择-</option>";
	for(var i=0;i<length;i++){
		html +="<option value='"+jsonData[i].id+"'>"+jsonData[i].placeZh+"</option>";
	}
	$("#"+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<Area> list = new ArrayList<Area>();
		try {
			if (null == areaCode) {
				//如果为空则查所有的省
				list = areaService.listAllProvince();
			} else {
				//不为空则根据父id查下面的所有子项
				list = areaService.listByParentId(areaCode);
			}
			return buildDataResult(list);
		} catch (BizException e) {
			return buildExceptionResult(e);
		}
	}
}

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