JavaWeb開辟之應用jQuery與Ajax完成靜態聯級菜單後果。本站提示廣大學習愛好者：（JavaWeb開辟之應用jQuery與Ajax完成靜態聯級菜單後果）文章只能為提供參考，不一定能成為您想要的結果。以下是JavaWeb開辟之應用jQuery與Ajax完成靜態聯級菜單後果正文
寫在後面，在筆者完成這個demo的時刻，筆者發明如今年夜家曾經不消Ajax來完成聯級菜單了，現實上筆者這個demo也其實不是為了完成這個，筆者重要的進修偏向是JavaWeb後台的營業邏輯開辟。然則做後台呢照樣須要對前端有所懂得，特別是像Ajax這類異步提交數據的技巧須要懂得並控制。所以這裡筆者這裡用了一個聯級菜單來演習Ajax異步提交，固然後續還會寫幾個異步提交表單的demo。
筆者的後台是用的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" 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，這裡只能選擇當地的，假如須要挪用其他域的資本，請谷歌處理跨域成績
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完成靜態聯級菜單後果，願望對年夜家有所贊助，假如年夜家有任何疑問請給我留言，小編會實時答復年夜家的。在此也異常感激年夜家對網站的支撐！
