阶段二 jQuery与Ajax入门 3-8实现二级联动菜单

最新推荐文章于 2024-07-06 19:25:43 发布

nainai角兽

最新推荐文章于 2024-07-06 19:25:43 发布

阅读量133

点赞数

分类专栏：阶段二 web入门文章标签： ajax jquery

本文链接：https://blog.csdn.net/m0_46625594/article/details/108814454

版权

阶段二 web入门专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

Channel.java

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;
	}
}

ChannelServlet.java

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");
		String parent = request.getParameter("parent");
		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", "..."));
			}
		}
		/* json序列化字符串 */
		String json = JSON.toJSONString(chlist);
		/* 发送给客户端 */
		response.setContentType("text/html;charset=utf-8");
		/* 输出 */
		response.getWriter().println(json);
	}

}

cascade_menu.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- JS引用 -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(function(){
		$.ajax({
			"url" : "/ajax/channel",//地址
			"data" : {"level" : "1"},//传递参数
			"type" : "get" , //get方式发送请求
			"dataType" : "json" , //数据返回的格式：json
			//接收响应时的处理函数
			"success" : function(json){
				//打印
				console.log(json);
				/* 对数组进行遍历 */
				for(var i = 0 ; i < json.length ; i++){
					var ch = json[i];
					//id为lv1的，组件的内部追加对应的html
					$("#lv1").append("<option value='" + ch.code + "'>" + ch.name + "</option>")
				}
			}
		})
	})
	
	$(function(){
		/* id为lv1.on绑定单击事件 */
		$("#lv1").on("change" , function(){
			/* this当前触发对向，val当前选中的选项 */
			var parent = $(this).val();
			console.log(parent);//打印
			$.ajax({
				"url" : "/ajax/channel" , 
				"data" : {"level" : "2" , "parent" : parent},
				"dataType" : "json" , 
				"type" : "get" ,
				"success" : function(json){
					console.log(json);
					//移除所有lv2下的原始option选项
					$("#lv2>option").remove();
					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>

nainai角兽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
阶段二 jQuery与Ajax入门 3-8实现二级联动菜单

效果图导航Channel.javapackage 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
复制链接

扫一扫