Ajax和数据库实现三级联动

//前台代码

<div class="ptb10">
<label class="fb">&nbsp;&nbsp;&nbsp;&nbsp;仓库：</label>
<select class="dfaelect" id="depot" name="depot.depotName">
<option value="-1">====请选择仓库====</option>
<c:forEach items="${depotList }" var="d"><option value="${d.depotId }">${d.depotName }</option></c:forEach>
</select>
<label class="fb">&nbsp;&nbsp;&nbsp;&nbsp;区域：</label>
<select class="dfaelect" id="area" name="area.areaName">
<option value="-1">====请选择区域====</option>
</select>
<label class="fb">&nbsp;&nbsp;&nbsp;&nbsp;库位：</label>
<select class="dfaelect" id="position" name="indetail.position.positionId">
<option value="-1">====请选择库位====</option>
</select>
</div>

//三级联动--ajax代码

$(document).ready(function(){
$("#depot").change(function(){
var dId=$("#depot").val();
$.ajax(
{
  url:"<%=path%>/getarea.action",
  type:'post',
  data:'depotId='+dId,
  async:true,
  contentType: "application/x-www-form-urlencoded; charset=utf-8", 
  dataType:'json',
  success:function(arr,status){
  $("#area").empty();
  $("#area").append("<option value='-1'>===请选择区域===</option>");
     for(var i=0;i<arr.length;i++){
       $("#area").append("<option value="+arr[i].areaId+">"+arr[i].areaName+"</option>");
     }
  }
});
});
$("#area").change(function(){
var aId=$("#area").val();
$.ajax(
{
  url:"<%=path%>/getposition.action",
  type:'post',
  data:'areaId='+aId,
  async:true,
  contentType: "application/x-www-form-urlencoded; charset=utf-8", 
  dataType:'json',
  success:function(arr,status){
  $("#position").empty();
  $("#position").append("<option value='-1'>===请选择库位===</option>");
     for(var i=0;i<arr.length;i++){
       $("#position").append("<option value="+arr[i].positionId+">"+arr[i].positionName+"</option>");
     }
  }
});
});
}

);

//后台代码

//获取区域
@Action(value="/getarea")
public void getArea() throws IOException{
HttpServletRequest request=ServletActionContext.getRequest();
HttpServletResponse response=ServletActionContext.getResponse();
request.setCharacterEncoding("UTF-8");  
        response.setContentType("text/html;charset=UTF-8"); 
        int depotId=Integer.parseInt(request.getParameter("depotId"));
try {
           List<Area> areaList=inLibraryService.findAreaById(depotId);
           //处理JSON 转换异常 死循环 There is a cycle in the hierarchy
           JsonConfig jsonConfig = new JsonConfig();  
           jsonConfig.setExcludes(new String[]{"depot","positions"});
           response.getWriter().write(JSONArray.fromObject(areaList,jsonConfig).toString());
        } catch (Exception e) {
            e.printStackTrace();
        }finally{
        response.getWriter().close();
        }
}
//获取库位
@Action(value="/getposition")
public void getPosition() throws IOException{
HttpServletRequest request=ServletActionContext.getRequest();
HttpServletResponse response=ServletActionContext.getResponse();
request.setCharacterEncoding("UTF-8");  
        response.setContentType("text/html;charset=UTF-8");
        int areaId=Integer.parseInt(request.getParameter("areaId"));
try {
           List<Position> positionList=inLibraryService.findPositionById(areaId);
           //处理JSON 转换异常 死循环 There is a cycle in the hierarchy
           JsonConfig jsonConfig = new JsonConfig();  
           jsonConfig.setExcludes(new String[]{"area","posdetails","indetails","outdetails"});
           response.getWriter().write(JSONArray.fromObject(positionList,jsonConfig).toString());
        } catch (Exception e) {
            e.printStackTrace();
        }finally{
        response.getWriter().close();
        }
}