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

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

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

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

Jquery官网链接

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

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

JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果_第1张图片

第三,开始编写代码

新建一个JSP文件

代码如下

<%@page import="java.util.Map"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>




Ajax Test



<%List> listMap = (List>)request.getAttribute("list"); %>









第四,最后实现的效果图

JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果_第2张图片

JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果_第3张图片

JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果_第4张图片

JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果_第5张图片

以上所述是小编给大家介绍的JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

你可能感兴趣的:(JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果)