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

男娘i 2022-06-15 00:00 332阅读 0赞

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