JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果
写在前面，在笔者完成这个demo的时候，笔者发现现在大家已经不用Ajax来完成联级菜单了，实际上笔者这个demo也并不是为了完成这个，笔者主要的学习方向是JavaWeb后台的业务逻辑开发。但是做后台呢还是需要对前端有所了解，尤其是像Ajax这种异步提交数据的技术需要了解并掌握。所以这里笔者这里用了一个联级菜单来练习Ajax异步提交，当然后续还会写几个异步提交表单的demo。
笔者的后台是用的spring+SpringMVC的框架，这里不对这部分进行解释，重点在jQuery和Ajax。
第一，下载jquery.js这个资源
第二，将下载好的jquery.js导入项目中
在javaweb项目中，直接放在 WebContent 中即可（也可以建立自己的文件夹，但不要放在WEB-INF文件中）
第三，开始编写代码
新建一个JSP文件
代码如下
<%@page import="java.util.Map"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax Test</title>
</head>
<body>
<!--这是从后台传入前端的request中获取数据的代码，与主题Ajax可以脱离，不必过多关注-->
<%List<Map<String,Object>> listMap = (List<Map<String,Object>>)request.getAttribute("list"); %>
<select id="class" onchange="getStudent(this.value)">
<option value="-1">请选择班级</option>
<%for(int i = 0; i < listMap.size(); i++){
Map<String,Object> map = listMap.get(i);
%>
<option><%=map.get("class").toString() %></option>
<%} %>
<!--先选择班级，然后第二个菜单选项会根据选择的内容使用Ajax异步同步后台数据库的数据，从而设定第二个菜单的选项-->
</select>
<!--第二个菜单，根据选择的班级确定姓名-->
<select id="name">
<option>请先选择班级</option>
</select>
</body>
<!--导入jquery资源-->
<script type="text/javascript" src="jquery/jquery-3.1.1.min.js"></script>
<!--使用jquery中的ajax对界面进行异步同步操作-->
<script>
//jquery标准语法
$(document).ready(function(){
//监听id为class的select控件的改变动作，当这个控件所选中的控件改变时会出发这个function
$("#class").change(function(){
//调用jquery中的ajax
$.ajax({
//设定提交方式，主要是"GET"和"POST"
type:"POST",
//设定提交的url，这里只能选择本地的，如果需要调用其他域的资源，请google解决跨域问题
url:"ajax.html?className="+$("#class").val(),
//设定后台返回的格式，一般都是直接使用json，这一句不能少，否则当后台返回数据时，不会调用success方法
dataType:"json",
//当后台成功返回数据时调用该方法，data参数表示被jquery中的ajax格式化的json数据（实际上在非jquery的ajax中需要我们手动格式化，纯JS的方法我也写在了注释里面。jquery中格式json数据的方法是parse）
success:function(data){
//清空id为name的select控件
$("#name").empty();
//给id为那么的select控件添加一个选项
$("#name").append("<option>请选择姓名</option>");
//循环遍历整个data（JSON数据），并给id为name的select控件添加option选项
$.each(data,function(i,n){
$("#name").append("<option>"+data[i].name+"</option>");
});
},
//当返回数据不成功时的操作
error:function(jqXHR,XMLResponse){
alert(arguments[1]);
alert(XMLResponse.responseText);
alert("发生错误:"+jqXHR.status);
}
});
});
});
</script>
<!--不用Jquery库的提交方式（这是使用纯JS代码提交，实际上很少使用了，但是可以用来理解ajax）
<script type="text/javascript">
//这里实际上需要在select控件中增加一个onchange来调用这个方法，然后会自动将选中的值存放于这个classname变量中
function getStudent(className){
if(className!="-1"){
//使用XMLHttpRequest方法，实际上在上面的jquery中也是用的这个方法，只不过已经给我们封装好了
var request = new XMLHttpRequest();
//使用open方法填写参数，最后一个true表示使用使用异步提交，可以省略，默认值就是true
request.open("POST","ajax.html?className="+className,true);
//发送ajax请求
request.send();
//监听请求的状态，主要有0 1 2 3 4 这几种，但是一边只会监听2 3 4 ，其中4表示成功
request.onreadystatechange = function(){
//判断只有当请求成功时才进行下一步
if(request.readyState===4){
//判断只有当网页的返回码为200 OK时才进行下一步
if(request.status===200){
//使用JSON.parse方法格式化返回的json数据
var data = JSON.parse(request.responseText);
//遍历
for(var i = 0; i < document.getElementById("name").length; i++){
document.getElementById("name").remove(document.getElementById("name").options[i]);
}
document.getElementById("name").add(new Option(data[0].name));
}
}
}
}
}
</script>-->
</html>
第四，最后实现的效果图
以上所述是小编给大家介绍的JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
javaweb学习总结——使用JDBC处理MySQL大数据
BLOB (binary large object),二进制大对象,是一个可以存储二进制文件的容器.在计算机中,BLOB常常是数据库中用来存储二进制文件的字段类型,BLOB是一个大文件,典型的BLOB是一张图片或一个声音文件,由于它们的尺寸,必须使用特殊的方式来处理(例如:上传.下载或者存放到一个数据库). 一.基本概念 在实际开发中,有时是需要用程序把大文本或二进制数据直接保存到数据库中进行储存的. 对MySQL而言只有blob,而没有clob,mysql存储大文本采用的是Text,Text和
-
JavaWeb中导出excel文件的简单方法
在平时做系统项目时,经常会需要做导出功能,不论是导出excel,还是导出cvs文件.我下面的demo是在springmvc的框架下实现的. 1.JS中只需要用GET模式请求导出就可以了: $('#word-export-btn').parent().on('click',function(){ var promotionWord = JSON.stringify($('#mainForm').serializeObject()); location.href="${ctx}/promotionW
-
详解JavaWeb中的 Listener
一.基本概念 JavaWeb里面的listener是通过观察者设计模式进行实现的.对于观察者模式,这里不做过多介绍,大概讲一下什么意思. 观察者模式又叫发布订阅模式或者监听器模式.在该模式中有两个角色:观察者和被观察者(通常也叫做主题).观察者在主题里面注册自己感兴趣的事件,当这个事件发生时,主题会通过回调接口的方式通知观察者. 举个生活中的例子:订阅报纸.任何一个家庭或个人都可以向报社订阅报纸.这里报社就是"主题",家庭就是"观察者".比如家庭需要订阅明天早晨的报
-
javaweb如何实现请求和响应
先来看一个流程图: 服务器处理请求的流程: (1)服务器每次收到请求时,都会为这个请求开辟一个新的线程. (2)服务器会把客户端的请求数据封装到request对象中,request就是请求数据的载体! (3)服务器还会创建response对象,这个对象与客户端连接在一起,它可以用来向客户端发送响应. 由流程图可以看出,在JavaWeb的请求与响应中,最重要的两个参数为request以及response,这两参数在Servlet的service( )方法中. 1.response概念: r
-
JavaWeb 简单分页实现代码
JavaWeb 简单分页的实现: 这次主要是讲解一下通过登录后对得到的数据进行分页,首先我们新建一个登录页面login.jsp,因为我们主要学习一下分页,所以登录验证的部分不再阐述,主要代码如下: <form action="pageServlet"> 用户名:<input type="text" name="username"><br> 密 码:<input type="text"
-
JavaWeb Spring开发入门深入学习
1 Spring基本特征 Spring是一个非常活跃的开源框架:它是一个基于Core来构架多层JavaEE系统的框架,它的主要目地是简化企业开发. Spring以一种非侵入式的方式来管理你的代码,Spring提倡"最少侵入",这也就意味着你可以适当的时候安装或卸载Spring,Spring让java亮了. (开放–闭合原理),这里是闭原则. 2 开发spring所需要的工具 (这里先将spring2.5 ,后面3.0) 2.1 Spring的jar包 到http://www.sprin
-
JavaWeb Spring依赖注入深入学习
一.依赖注入(DI) 依赖注入听起来很高深的样子,其实白话就是:给属性赋值.一共有两种方法,第一是以构造器参数的形式,另外一种就是以setting方法的形式. 1 构造器注入 1 使用构造器注入 使用xml的注入方式 A. 通过参数的顺序 <constructor-arg index="0"><value>张三</value></constructor-arg> <constructor-arg index="1"
-
JavaWeb实现裁剪图片上传完整代码
本文实例为大家分享了JavaWeb实现裁剪图片上传完整案例,供大家参考,具体内容如下 实现思路 •使用jcrop插件手机要裁剪图片的坐标 •将收集到的参数传递到后台,在后台使用java图形对象绘制图像进行裁剪 ◦后台处理流程: 1.将上传的图片按按照比例进行压缩后上传到文件服务器,并且将压缩后的图片保存在本地临时目录中. 2.将压缩后的图片回显到页面,使用jcrop进行裁剪,手机裁剪坐标(x,y,width,height) ■@paramx 目标切片起点坐标X ■@param y 目标切片起点
-
JavaWeb Spring注解Annotation深入学习
一.注解 注解Annotation,是一种类似注释的机制,在代码中添加注解可以在之后某时间使用这些信息.跟注释不同的是,注释是给我们看的,java虚拟机不会编译,注解也是不编译的,但是我们可以通过反射机制去读取注解中的信息.注解使用关键字@interface,继承java.lang.annotition.Annotition 1.javaSE中的注解 先举个例子来回顾一下在javaSE中注解是什么东东,关键是两点,注解的定义与如何通过反射得到注解上面的信息. 1.先定义两个注解一个是在类上有注解
-
JavaWeb Session 会话管理实例详解
Session会话简介 会话是指在一段时间内,用户使用同一个浏览器进程与Web应用之间的交互过程. 会话(Session)通常用来跟踪用户的状态,缓存用户在此浏览器进程中的信息. 当用户关闭浏览器,上一个Session也就无法再次获得了(Cookie的maxAge为-1的情况).再次打开新的浏览器,将开始一个新的会话. 类javax.servlet.http.HttpSession.每一个HttpSession代表用户的一个会话. 每一个Session的过期时间默认为30分钟. 当浏览器第一次访