JavaWeb开发利用jQuery和Ajax实现动态级联菜单效果

写在前面，当我完成这个演示的时候，我发现大家现在都没有使用Ajax来完成联合菜单。其实这个演示并不是为了这个目的，我的主要学习方向是JavaWeb背景下的业务逻辑开发。然而，作为一个后台，你需要了解一些关于前端的知识，尤其是像Ajax这样的异步数据提交技术。因此，这里的作者使用了一个联合菜单来练习Ajax异步提交，当然，稍后还会编写几个异步提交表单的演示。

作者的背景是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 ' content type=' text/html；charset=UTF-8 ' page encoding=' UTF-8 ' %！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www . w3 . org/TR/HTML 4/loose . DTD ' htmlhearteta http-equiv=' Content-Type ' Content=' text/HTML；charset=UTF-8 ' title AJax Test/title/headsdy！-这是从后台传输到前端的请求中获取数据的代码，无需过多关注即可从主题Ajax中分离出来-%listmaps string，object list map=(listmaps string，object)request . getattribute(' list ')；% select id=' class ' on change=' getstudent(this。value)' option value='-1 '请为(int I=0；I listmap . size()；i ){MapString，Object map=listmap . get(I)；%option%=map.get('class ')。toString() %/option%} %！-先选择类，然后第二个菜单选项会根据选择的内容使用Ajax异步同步后台数据库的数据，从而设置第二个菜单的选项-/select！-第二个菜单，根据选择的类确定名称-选择id=' name '选项请先选择类/选项/选择/正文！-导入jquery资源-脚本类型=' text/JavaScript ' src=' http : jquery/jquery-3 . 1 . 1 . min . js '/脚本！-在jquery中使用ajax在接口上执行异步和同步操作-script//jquery标准语法$ (document)。ready(function(){//听id为class的select控件的更改动作，当这个控件选择的控件发生更改时，这个function $ ('# class ')。change(function(){//调用Ajax $。jquery中的Ajax({//设置提交方式，主要是' GET '和' post' type3360' post '，//设置提交的url，如果需要，这里只能选择本地的一个。类名=' $ ('# class ')。val()，//设置后台返回的格式，一般直接使用json。否则，当后台返回数据时，将不会调用成功方法datatype :“JSON”。//后台成功返回数据时会调用此方法。数据参数表示jquery中ajax格式化的JSON数据(实际上，

在jquery中格式化json数据的方法是parse)success : function(data){//清空id为name $('#name ')的select控件。empty()；//添加一个选项$(“# name”)。将(' option，请选择一个名称/选项')附加到id为的select控件；//循环遍历整个数据(JSON数据)，并添加选项option $。每个(数据，函数(I，n) {$ ('# name ')。追加('选项'数据[I]。name'/option ')添加到id为name的select控件中；});}，//返回数据不成功时的error :函数(jqxhr，xmlrresponse){ alert(参数[1])；alert(xmlrresponse . response text)；Alert('出现错误： ' jqxhr . status)；}});});});/脚本！-没有Jquery库提交方法(这是纯JS代码提交，很少使用，但可以用来理解Ajax)。脚本类型=' text/JavaScript '//在这里，实际上需要在select控件中添加一个onchange来调用这个方法，然后选定的值将自动存储在这个classname变量中。函数get student(class name){ if(class name！='-1'){//使用XMLHttpRequest方法，实际上在上面的jquery中使用过，只不过var request=new XMLHttpRequest()已经为我们打包好了；//使用open方法填写参数。最后一个真正的意思是使用异步提交，可以省略。默认值为truerequest.open ('post '，' ajax.html？className=' className，true)；//发送Ajax request . send()；//监听请求的状态主要包括0 1 2 3 4，但一方只监听2 3 4。其中4表示成功。请求。onreadystatechange=function(){//只有在请求成功的情况下，才能判断下一步是if(if(request . readystate===4){//=4)。//判断下一步是if (request。status==200)仅当网页的返回代码为200 OK时。//使用json.parse方法格式化返回的json数据vardata=JSON . parse(request . responsetext)；//traverse for(var I=0；i document.getElementById('name ')。长度；I){ document . getelementbyid(' name ')。移除(document.getElementById('name ')。选项[I])；}document.getElementById('name ')。添加(新选项(数据[0])。姓名))；}}}}}/script-/html第四次也是最后一次渲染

以上是边肖介绍的JavaWeb开发，利用jQuery和Ajax实现动态级菜单效果。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！