jquery、ajax的二级菜单联动

项目知识
Jquery
Ajax
Json
此次项目的收获
导入jquery包
导入fastjson-1.252.jar
$(function(){})页面加载后运行 可以有多个
$(“#idv1”).append(“”) append在组件内部追加对应的html
Jq事件绑定 $(“#lv1”).on(“change”,function(){});
$(this).val(); 获取当前输入项的值或选中的项 获取的是input的value值
项目步骤

一．频道类Channel(code,name)
二．ChannelServlet类   doGet方法
String level = request.getParameter(“level”);
String parent =request.getParameter(“parent”);
List list =new ArrayList();
If(level.equsls(“1”)){
List.add(new Channel(“”,””));
List.add(new Channel(“”,””));
}else if(parent.equals(“2”){
If(parent.equals(“ai”)){
List.add(new Channel(“”,””)):
List.add(new Channel(“”,””)):
}else if(parent.equals(“web”)){
List.add(new Channel(“”,””)):
List.add(new Channel(“”,””)):

}
}
String json=JSON.toJSONString(list);
Response.setContentType(“text/html;charset=utf-8”);
Response.getWriter().println(json);
三.html代码
Jquery
<script>
$(function(){
$.ajax({//发起ajax请求
“url”:”/ajax/channel”;//ChannelServlet  发送地址
“data”:{”level”:”1”},//发送数据
“dataType”:”json”,//数据类型
“type”:”get”,//发送请求的方式
“success”:function(json){ //发送成功后执行的代码 
Console.log(json);
For(int i=0;i<json.length;i++){
Var ch =json[i];
$(“#lv1”).append(“<option value=’”+ch.code+”>”+ch.code+”</option>”)
}
}
})
})
$(“#lv1”).on(“change”,function(){
Var parsent=$(this).val();//获取lv1的value值
Console.log(parsent);
$.ajax({
“url”:”/ajax/channel”,
“data”:”{“level”:”2”,”parent”:”parent”}”,
“dataType”:”json”,
“type”:”get”,
“success”:function(json){
Console.log(json);
//删除option
$(“#lv2>option”).remove();
For(var i=0;i<json.length;i++){
Var ch =json[i];
$(“#lv2”).append(“<option value=’”+ch.code+”>”+ch.code+”</option>”)

}
}
})
})
</script>










Html
<select id="lv1" style="width:200px;height:30px">
	<option  selected="selected" >请选择</option>
</select>
<select id="lv2" style="width:200px;height:30px">
</select>