快捷導(dǎo)航

JavaWeb開發(fā)之使用jQuery與Ajax實(shí)現(xiàn)動(dòng)態(tài)聯(lián)級(jí)菜單效果

更新時(shí)間：2016年10月08日 11:28:42 作者：暴沸

這篇文章主要介紹了JavaWeb開發(fā)之使用jQuery與Ajax實(shí)現(xiàn)動(dòng)態(tài)聯(lián)級(jí)菜單效果的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

寫在前面，在筆者完成這個(gè)demo的時(shí)候，筆者發(fā)現(xiàn)現(xiàn)在大家已經(jīng)不用Ajax來完成聯(lián)級(jí)菜單了，實(shí)際上筆者這個(gè)demo也并不是為了完成這個(gè)，筆者主要的學(xué)習(xí)方向是JavaWeb后臺(tái)的業(yè)務(wù)邏輯開發(fā)。但是做后臺(tái)呢還是需要對(duì)前端有所了解，尤其是像Ajax這種異步提交數(shù)據(jù)的技術(shù)需要了解并掌握。所以這里筆者這里用了一個(gè)聯(lián)級(jí)菜單來練習(xí)Ajax異步提交，當(dāng)然后續(xù)還會(huì)寫幾個(gè)異步提交表單的demo。

筆者的后臺(tái)是用的spring+SpringMVC的框架，這里不對(duì)這部分進(jìn)行解釋，重點(diǎn)在jQuery和Ajax。

第一，下載jquery.js這個(gè)資源

Jquery官網(wǎng)鏈接

第二，將下載好的jquery.js導(dǎo)入項(xiàng)目中

在javaweb項(xiàng)目中，直接放在 WebContent 中即可（也可以建立自己的文件夾，但不要放在WEB-INF文件中）

第三，開始編寫代碼

新建一個(gè)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>
<!--這是從后臺(tái)傳入前端的request中獲取數(shù)據(jù)的代碼，與主題Ajax可以脫離，不必過多關(guān)注-->
<%List<Map<String,Object>> listMap = (List<Map<String,Object>>)request.getAttribute("list"); %>
<select id="class" onchange="getStudent(this.value)">
<option value="-1">請(qǐng)選擇班級(jí)</option>
<%for(int i = 0; i < listMap.size(); i++){
Map<String,Object> map = listMap.get(i);
%>
<option><%=map.get("class").toString() %></option>
<%} %>
<!--先選擇班級(jí)，然后第二個(gè)菜單選項(xiàng)會(huì)根據(jù)選擇的內(nèi)容使用Ajax異步同步后臺(tái)數(shù)據(jù)庫的數(shù)據(jù)，從而設(shè)定第二個(gè)菜單的選項(xiàng)-->
</select>
<!--第二個(gè)菜單，根據(jù)選擇的班級(jí)確定姓名-->
<select id="name">
<option>請(qǐng)先選擇班級(jí)</option>
</select>
</body>
<!--導(dǎo)入jquery資源-->
<script type="text/javascript" src="jquery/jquery-3.1.1.min.js"></script>
<!--使用jquery中的ajax對(duì)界面進(jìn)行異步同步操作-->
<script>
//jquery標(biāo)準(zhǔn)語法
$(document).ready(function(){
//監(jiān)聽id為class的select控件的改變動(dòng)作，當(dāng)這個(gè)控件所選中的控件改變時(shí)會(huì)出發(fā)這個(gè)function
$("#class").change(function(){
//調(diào)用jquery中的ajax
$.ajax({
//設(shè)定提交方式，主要是"GET"和"POST"
type:"POST",
//設(shè)定提交的url，這里只能選擇本地的，如果需要調(diào)用其他域的資源，請(qǐng)google解決跨域問題
url:"ajax.html?className="+$("#class").val(),
//設(shè)定后臺(tái)返回的格式，一般都是直接使用json，這一句不能少，否則當(dāng)后臺(tái)返回?cái)?shù)據(jù)時(shí)，不會(huì)調(diào)用success方法
dataType:"json",
//當(dāng)后臺(tái)成功返回?cái)?shù)據(jù)時(shí)調(diào)用該方法，data參數(shù)表示被jquery中的ajax格式化的json數(shù)據(jù)（實(shí)際上在非jquery的ajax中需要我們手動(dòng)格式化，純JS的方法我也寫在了注釋里面。jquery中格式j(luò)son數(shù)據(jù)的方法是parse）
success:function(data){
//清空id為name的select控件
$("#name").empty();
//給id為那么的select控件添加一個(gè)選項(xiàng)
$("#name").append("<option>請(qǐng)選擇姓名</option>");
//循環(huán)遍歷整個(gè)data（JSON數(shù)據(jù)），并給id為name的select控件添加option選項(xiàng)
$.each(data,function(i,n){
$("#name").append("<option>"+data[i].name+"</option>");
});
},
//當(dāng)返回?cái)?shù)據(jù)不成功時(shí)的操作
error:function(jqXHR,XMLResponse){
alert(arguments[1]);
alert(XMLResponse.responseText);
alert("發(fā)生錯(cuò)誤:"+jqXHR.status);
}
});
});
});
</script>
<!--不用Jquery庫的提交方式（這是使用純JS代碼提交，實(shí)際上很少使用了，但是可以用來理解ajax）
<script type="text/javascript">
//這里實(shí)際上需要在select控件中增加一個(gè)onchange來調(diào)用這個(gè)方法，然后會(huì)自動(dòng)將選中的值存放于這個(gè)classname變量中
function getStudent(className){
if(className!="-1"){
//使用XMLHttpRequest方法，實(shí)際上在上面的jquery中也是用的這個(gè)方法，只不過已經(jīng)給我們封裝好了
var request = new XMLHttpRequest();
//使用open方法填寫參數(shù)，最后一個(gè)true表示使用使用異步提交，可以省略，默認(rèn)值就是true
request.open("POST","ajax.html?className="+className,true);
//發(fā)送ajax請(qǐng)求
request.send();
//監(jiān)聽請(qǐng)求的狀態(tài)，主要有0 1 2 3 4 這幾種，但是一邊只會(huì)監(jiān)聽2 3 4 ，其中4表示成功
request.onreadystatechange = function(){
//判斷只有當(dāng)請(qǐng)求成功時(shí)才進(jìn)行下一步
if(request.readyState===4){
//判斷只有當(dāng)網(wǎng)頁的返回碼為200 OK時(shí)才進(jìn)行下一步
if(request.status===200){
//使用JSON.parse方法格式化返回的json數(shù)據(jù)
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>

第四，最后實(shí)現(xiàn)的效果圖

這里寫圖片描述

以上所述是小編給大家介紹的JavaWeb開發(fā)之使用jQuery與Ajax實(shí)現(xiàn)動(dòng)態(tài)聯(lián)級(jí)菜單效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: