JavaWeb实现二级联动菜单
Posted huowuyan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaWeb实现二级联动菜单相关的知识，希望对你有一定的参考价值。
实现效果
频道信息
package demo;
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提供数据
package demo;
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("/ch_content")
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"); //获取频道，1为父类频道，2为子类频道
String parent = request.getParameter("parent"); //获取父类频道code，以便于加载子类频道信息
List<Channel> chlist = new ArrayList<>();
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);
Ajax请求数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
//获取父类频道的数据
$(function()
$.ajax(
"url" : "/ajax/ch_content",
"type" : "get",
"data" : "level" : "1",
"dataType" : "json",
"success" : function(json)
var html = "";
for(var i = 0; i < json.length; i++)
html += "<option value='" + json[i].code + "'>" + json[i].name + "</option>";
$("#lv1").append(html);
)
)
//联动子类频道的数据
$(function()
$("#lv1").change(function()
var parent = $(this).val(); //获取当前选项的value值
$.ajax(
"url" : "/ajax/ch_content",
"type" : "get",
"data" : "level" : "2", "parent" : parent,
"dataType" : "json",
"success" : function(json)
var html = "";
$("#lv2>option").remove();
for(var i = 0; i < json.length; i++)
html += "<option value='" + json[i].code + "'>" + json[i].name + "</option>";
$("#lv2").append(html);
)
)
)
</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>以上是关于JavaWeb实现二级联动菜单的主要内容，如果未能解决你的问题，请参考以下文章