【JavaWeb开发】使用Jquery与Ajax实现动态联级菜单

使用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"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax Testtitle>
head>
<body>

<%ListString,Object>> listMap = (ListString,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("");
                //循环遍历整个data(JSON数据),并给id为name的select控件添加option选项
                $.each(data,function(i,n){
                    $("#name").append("+data[i].name+"");
                });
            },
            //当返回数据不成功时的操作
            error:function(jqXHR,XMLResponse){
                alert(arguments[1]);
                alert(XMLResponse.responseText);
                alert("发生错误:"+jqXHR.status);
            }
        });
    });
});

script>

html>
  • 第四,最后实现的效果图

【JavaWeb开发】使用Jquery与Ajax实现动态联级菜单_第2张图片

【JavaWeb开发】使用Jquery与Ajax实现动态联级菜单_第3张图片

【JavaWeb开发】使用Jquery与Ajax实现动态联级菜单_第4张图片

【JavaWeb开发】使用Jquery与Ajax实现动态联级菜单_第5张图片

写在最后,笔者的主要学习方向是后台开发,所以在这个ajax上面没有过多深入,只要能实现即可,如果有错误,还请各位指出,谢谢。

你可能感兴趣的:(java,jquery,ajax)