省市城市ajax级联查询实现代码,ajax前后台交互实现省市区级联

1.html代码

所在地址：

请选择

selected="selected"#if> value="${province.id}">${province.placeZh}

#list>

${area.city.placeZh}

请选择

#if>

${area.county.placeZh}

请选择

#if>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的标签；市修改后添加区域信息。