寫在前面，在筆者完成這個demo的時候，筆者發現現在大家已經不用Ajax來完成聯級菜單了，實際上筆者這個demo也并不是為了完成這個，筆者主要的學習方向是JavaWeb后臺的業務邏輯開發。但是做后臺呢還是需要對前端有所了解，尤其是像Ajax這種異步提交數據的技術需要了解并掌握。所以這里筆者這里用了一個聯級菜單來練習Ajax異步提交，當然后續還會寫幾個異步提交表單的demo。
筆者的后臺是用的spring+SpringMVC的框架，這里不對這部分進行解釋，重點在jQuery和Ajax。
第一，下載jquery.js這個資源
Jquery官網鏈接
第二，將下載好的jquery.js導入項目中
在javaweb項目中，直接放在 WebContent 中即可（也可以建立自己的文件夾，但不要放在WEB-INF文件中）
第三，開始編寫代碼
新建一個JSP文件
代碼如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
<%@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表示使用使用異步提交，可以省略，默認值就是truerequest.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實現動態聯級菜單效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對服務器之家網站的支持！
原文鏈接：http://blog.csdn.net/baofeidyz/article/details/52743193
