欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-03-13 09:39:21
写在前面,在笔者完成这个demo的时候,笔者发现现在大家已经不用ajax来完成联级菜单了,实际上笔者这个demo也并不是为了完成这个,笔者主要的学习方向是javaweb后台...

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

笔者的后台是用的spring+springmvc的框架,这里不对这部分进行解释,重点在jquery和ajax。

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

jquery官网链接

第二,将下载好的jquery.js导入项目中

在javaweb项目中,直接放在 webcontent 中即可(也可以建立自己的文件夹,但不要放在web-inf文件中)

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

第三,开始编写代码

新建一个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开发之使用jQuery与Ajax实现动态联级菜单效果

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

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

以上所述是小编给大家介绍的javaweb开发之使用jquery与ajax实现动态联级菜单效果,希望对大家有所帮助