位置：首页>> 软件编程>> java编程>> JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果

JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果

作者：暴沸　　发布时间：2023-11-28 19:46:08　

标签：jquery,ajax,联级菜单

写在前面，在笔者完成这个demo的时候，笔者发现现在大家已经不用Ajax来完成联级菜单了，实际上笔者这个demo也并不是为了完成这个，笔者主要的学习方向是JavaWeb后台的业务逻辑开发。但是做后台呢还是需要对前端有所了解，尤其是像Ajax这种异步提交数据的技术需要了解并掌握。所以这里笔者这里用了一个联级菜单来练习Ajax异步提交，当然后续还会写几个异步提交表单的demo。

笔者的后台是用的spring+SpringMVC的框架，这里不对这部分进行解释，重点在jQuery和Ajax。

第一，下载jquery.js这个资源

Jquery官网链接

第二，将下载好的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>

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

</select>

<select id="name">
<option>请先选择班级</option>
</select>
</body>

<script type="text/javascript" src="jquery/jquery-3.1.1.min.js"></script>

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

</html>

第四，最后实现的效果图

以上所述是小编给大家介绍的JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果网站的支持！

来源：http://blog.csdn.net/baofeidyz/article/details/52743193

投稿

JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果

猜你喜欢