up:: JQuery对Ajax的支持 二级联动菜单的形式多种多样：
可以使用Ajax来实现二级联动菜单：（自然Jquery脚本提供了Ajax的简化）
实现主要有三个内容：
Channel类：JavaBean：
普通的JavaBean，没什么特别：code选项<option>的value，name选项<option>的显示值
package com.imooc.ajax;
public class Channel {
private String code;
private String name;
public Channel() {}
public Channel(String code, String name) {
super();
this.code = code;
this.name = name;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
Servlet：ChannelServlet类：
这个Servlet有点一类多用的感觉而已。。。每次执行都会创建一个新的chlist；；；
package com.imooc.ajax;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
/**
* Servlet implementation class ChannelServlet
*/
@WebServlet("/channel")
public class ChannelServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ChannelServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String level = request.getParameter("level"); // level=1:对应第一级菜单;level=2:对应第二级菜单;
String parent = request.getParameter("parent"); // parent：对应第一级菜单的选项<option>的value值
List<Channel> chlist = new ArrayList<Channel>();
if(level.equals("1")) {
chlist.add(new Channel("ai","前沿/区块链"));
chlist.add(new Channel("web","前端/JS"));
}else if(level.equals("2")) {
if(parent.equals("ai")) {
chlist.add(new Channel("micro","微服务"));
chlist.add(new Channel("blockchain","区块链"));
chlist.add(new Channel("other","…"));
}else if(parent.equals("web")) {
chlist.add(new Channel("html","HTML"));
chlist.add(new Channel("css","CSS"));
chlist.add(new Channel("other","…"));
}
}
String json = JSON.toJSONString(chlist);
response.setContentType("text/html;charset=utf-8");
response.getWriter().println(json);
}
}html：首先，第一个初始化函数会初始化第一级菜单；即data的参数是level=1，此时会执行servlet中的if(level.equals(“1”)){ }部分；；；即执行完第一个初始化函数后，会调用一次Servlet，最后的结果就是浏览器上的第一级菜单初始化了；此时，浏览器上的第一级菜单就会“存下”Servlet返回的结果，并在浏览器页面上显示出来；
其次，当第一级菜单发生change的时候，会调用第二个初始化函数；此时的data参数是{“level”:“2”,“parent”:parent}；其中parent是第一级菜单的option的value值，这个值是从前端浏览器中获取的，，，然后去调用Servlet，任然会从从头到尾执行，自然Servlet中的chlist会被重新创建。。。
最后，每次Servlet返回的结果都是以json的格式传输的，html把得到的json对应到前端界面上就行了；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script>
$(function(){ // 页面就绪函数完成第一功能：页面初始的时候，加载第一级栏目
$.ajax({
"url":"/ajax/channel",
"type":"get",
"data":{"level":"1"},
"dataType":"json",
"success":function(json){
console.log(json);
for(var i = 0;i<json.length;i++){
var ch = json[i];
$("#lv1").append("<option value='"+ch.code+"'>"+ch.name+"</option>") // append()：以前接触过，作用是在组件的内部追加对应的html
}
}
})
})
$(function(){ // jquery允许出现多个页面就绪函数 ，执行是从上到下依次执行；；；；每一个页面就绪函数最好是一个独立的功能，这符合低耦合性的原则
$("#lv1").on("change",function(){ // on()方法以前接触过，作用是用来绑定事件
var parent = $(this).val(); //$(this) 代表当前触发事件的对象;;;val()以前接触过，作用是用来获取输入项的值，同样可以用在下拉框上
console.log(parent);
$.ajax({
"url":"/ajax/channel",
"type":"get",
"data":{"level":"2","parent":parent},
"dataType":"json",
"success":function(json){
console.log(json);
$("#lv2>option").remove(); // 移除所有lv2下的原始option选项； >是CSS中的子选择器
for(var i=0;i<json.length;i++){
var ch = json[i];
$("#lv2").append("<option value='"+ch.code+"'>"+ch.name+"</option>");
}
}
})
})
})
</script>
</head>
<body>
<select id="lv1" style="width:200px;height:30px">
<option selected="selected">请选择</option>
</select>
<select id="lv2" style="width:200px;height:30px">
</select>
</body>
</html>效果：
注： （1）整体来看，Ajax的应用场景十分广泛，明白Ajax的作用，实际中很多业务场景适合使用Ajax；
（2）在实现某种业务问题时，具体的实现方式和实现策略，需要多看实际的例子，总结出大家广泛接受的，效果好的、实现方式和实现策略！！！