级联查询之前后端

1、级联查询用的最多的是地图查询，而地图中的地名相对来说是固定的，可以用js直接写死，在前端调用，不需要任何后台的操作。

这个例子中需要的是定义好js

<script src="jquery-1[1].2.6.js" type="text/javascript"></script><script src="province.js" type="text/javascript"></script><script src="allcitydata.js" type="text/javascript"></script><script>    //调用插件    $(function(){        $("#test").ProvinceCity();    });</script><div id="test">    <select id="name1"></select>    <select id="name2"></select>    <select id="name3"></select></div>

引入对应的js后，就可以作为一个静态的级联查询了。

2、另一种也是实际生场中常用的，就是需要经过后台，比如查询的时候多个筛选条件，每选择一个条件，下一个选择框则生成该条件下对应的其他选项，类似于树。

前端处理

<div class="col-sm-6">

//onchange()方法，select内的值变化后触发    <select id="Name1" name="name1" class="form-control"onchange="findname2Byname1()">    </select></div><div class="col-sm-6">    <select id="name2" name="name2" class="form-control">  </select></div><script>var varTable = null;function findname2Byname1(){var name1 =$("#name1").val();//获取name1的id值$("#name2").html("");$.ajax({type: "POST",cache: false,url:  "/web/getname2Byname1/" + name1  ,  //通过ajax去数据库取得该表id为name1的时候的name2的id数据，根据该id去name2中查询处name2的值，并返回dataType: "json",success: function (data) {var name2Data = data.aaData;$("#name2 ").empty();$("#name2 ").append("<option value=''>"+"全部"+"</option>");if(name2Data !=null){for(var i =0;i<name2Data .length;i++){//循环遍历，将name2的id和值添加到select中$("#name2 ").append("<option value='"+name2Data [i].name2Id+"'>"+name2Data [i].name2+"</option>");}varTable.fnDraw();//我的demo中使用的是datatable这个表格插件，这个方法就是自动刷新页面}},error: function (xhr, ajaxOptions, thrownError) {console.log("数据出错");}});}</script>

后端接收

@RequestMapping("/getname2Byname1/{id}")    @ResponseBody    public Map getname2Byname1(@PathVariable final Integer id, HttpServletRequest request, HttpServletResponse response, Model model) throws BizException {//Controller层，请求转发到service中做处理 XXservice.getname2Byname1 (id,map);}

 在service层的处理主要是根据数据库的结构，我在设计数据库的时候，在该数据表中存的是name1和name2的id，所以当我根据nameId查询到对应的name2Id时，还需要根据name2Id去Name2对应的数据库中取得name2的值，返回前端展示，如果在数据库中又存id也存值得话，就没有这么麻烦了。

public List<Name2> getname2Byname1 (int nameId, Map<String, Object> map) throws BizException {     List<Datademo> name2IdList;//根据nameId，向数据后台取得在nameId下的name2Id的list集合     name2IdList = datademoDao.getName2byId(nameId);//然后将list中的name2 id取出,并根据id去name2相应的数据库表中取得name2的值    List list = new ArrayList();    for(int i = 0;i<name2IdList .size();i++){        list.add(name2IdList .get(i).getname2Id());    }    List <Name2> name2List = name2Dao.getname2ByIdList(list);    map.put("aaData", name2List  );    return name2List  ;} 

//在dao层，通过实现mapper接口重写方法public List<DataDemo> getName2byId (Integer nameId ) {@Override    return getMapperByType(DataDemoMapper.class).getName2byId (nameId );}