jsp java ajax二级联动实现

数据库sql：

 CREATE TABLE `tb_category` (

  `cid` char(40) NOT NULL,
  `cname` varchar(50) DEFAULT NULL,
  `pid` char(40) DEFAULT NULL,
  `desc` varchar(200) DEFAULT NULL,
  PRIMARY KEY (`cid`),
  UNIQUE KEY `cname` (`cname`),
  KEY `FK_t_category_t_category` (`pid`),
  CONSTRAINT `fk_category_category` FOREIGN KEY (`pid`) REFERENCES `tb_category` (`cid`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

jsp:

<tr>
<td style="text-align: right;">所属一级分类：</td>
<td>

<select id="FirstCate"  name="FirstCate"  style="width: 232px;height: 30px ;font-size: 15px" onchange="changeCategory()">
  
   <option  >----请--选--择----</option>
   
  <c:forEach items="${listCategory}" var="lc">
   <c:if test="${lc.pid==null}">
    <option value="${lc.cid }"> ${lc.cname }</option>
   </c:if>
   </c:forEach>
</select>
</td>
</tr>

<tr>
<td style="text-align: right;">所属二级分类：</td>
<td>
<select id="secondTypeId" name="cid"  style="width: 232px;height: 30px" >
<option value="">----请--选--择----</option>

</select>
</td>

js代码：

 <script type="text/javascript">
function changeCategory(){

var cid = $("#FirstCate").val();
$.ajax({
type:'POST',
dataType:'text',//不写这个会提示下载或者改为json也是
url:'${pageContext.request.contextPath}/admin/video/ajaxFindSecondType',
data:{
cid1 : cid
}, 


success:function(data){

var secondCategoryObj = document.getElementById("secondTypeId");
  secondCategoryObj.innerHTML = "<option value=''>----请--选--择----</option>";
//解析json为数组
     var data = eval("("+data+")");     
     var dataList = data.tasks;
     if (dataList!= null) { //如果没有这一步，js会报length null之类的
     for(var i=0;i<dataList.length;i++)//遍历
     {
     var categoryObj = dataList[i];
var cid = categoryObj.id;
var cname = categoryObj.name;
          //进行添加到标签里
         secondCategoryObj.innerHTML =  secondCategoryObj.innerHTML + "<option value='"+cid+"'>"+cname+"</option>";
         
     }
     }

}
});  
}
</script>

Controller代码：

（1）
//通过url路径到add_moive页面，进行添加前准备(先查全部分类并传递到jsp,把一级分类的数据显示出来)
@RequestMapping("/addVideo")
public ModelAndView addVideo()throws Exception{

//查询所有分类并传数据到jsp页面去
List<CategoryCustom> listCategory = categoryService.findAllCategory();


ModelAndView modelAndView = new ModelAndView();

modelAndView.addObject("listCategory", listCategory);

modelAndView.setViewName("admin/yingshi/add_moive");

return modelAndView;
}

（2）

//根据id查询二级分类(我的分类在同一张表中(注意))。
@RequestMapping("/ajaxFindSecondType")
public @ResponseBody Map<String,Object> findSecondTypeById(String cid1,HttpServletResponse response )throws Exception{

List<TbCategory>  lTbCategories =  categoryService.findCategoryById(cid1);

Map<String,Object> jsonMap = new HashMap<String, Object>();
 
List list = null;

       if(null != lTbCategories && lTbCategories.size()>0){
           list = new ArrayList();
           
           for(TbCategory tbCategory : lTbCategories){
               Map<String,String> taskMap=new HashMap<String,String>();
               
               taskMap.put("id", tbCategory.getCid());
               taskMap.put("name", tbCategory.getCname());
               list.add(taskMap);
           }
       }
       jsonMap.put("tasks", list);
       return jsonMap;
 

}