java web菜单_【JavaWeb】实现二级联动菜单

实现效果

image

频道信息

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 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请求数据

Insert title here

//获取父类频道的数据

$(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 += "" + json[i].name + "";

}

$("#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 += "" + json[i].name + "";

}

$("#lv2").append(html);

}

})

})

})

请输入