Jquery和Ajax实现二级联动菜单（简单的例子，看看就行）

最新推荐文章于 2021-08-06 12:28:48 发布

小懒羊爱吃草

最新推荐文章于 2021-08-06 12:28:48 发布

阅读量1k

点赞数

分类专栏：（5）常用功能与过滤器、监听器、FreeMarker；

本文链接：https://blog.csdn.net/csucsgoat/article/details/113932624

版权

（5）常用功能与过滤器、监听器、FreeMarker；专栏收录该内容

46 篇文章 12 订阅

订阅专栏

本文介绍了如何使用Ajax和Java实现二级联动菜单的功能。通过JavaBean Channel类定义菜单数据，Servlet ChannelServlet处理请求并返回JSON数据，jQuery脚本处理前端交互，实现实时更新第二级菜单。文章强调了Ajax在动态更新页面内容中的应用及其重要性。

摘要由CSDN通过智能技术生成

二级联动菜单的形式多种多样：

可以使用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>

效果：