jQuery+jsp下拉框聯(lián)動(dòng)獲取本地?cái)?shù)據(jù)的方法(附源碼)
本文實(shí)例講述了jQuery+jsp下拉框聯(lián)動(dòng)獲取本地?cái)?shù)據(jù)的方法。分享給大家供大家參考，具體如下：
JQuery下拉框聯(lián)動(dòng)很好的體現(xiàn)了Ajax的按需取數(shù)據(jù)的要求，減小數(shù)據(jù)的交互量。(點(diǎn)擊此處下載源代碼)
下面的實(shí)例使用Json將服務(wù)器端的類或者對象轉(zhuǎn)換為JSON格式，主要運(yùn)用了6個(gè)jar包
commons-beanutils-1.7.0.jar
commons-collections-3.2.jar
commons-lang-2.3.jar
commons-logging-1.0.4.jar
ezmorph-1.0.3.jar
json-lib-2.1.jar
下面貼上實(shí)驗(yàn)圖，并詳細(xì)講解一下主要代碼
顯示頁面index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>JQuery實(shí)例-級聯(lián)下拉框效果</title> <meta http-equiv= "Content-Type" content="text/html";charset=UTF-8"> <link type="text/css" rel="stylesheet" href="css/chainselect.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/chainselect.js"></script> </head> <body> <div class="loading"> <p><img src="images/data-loading.gif" alt="數(shù)據(jù)裝載中" /></p> <p>數(shù)據(jù)裝載中......</p> </div> <div class="car"> <span class="carname"> 汽車廠商: <select> <option value="" selected="selected">請選擇汽車廠商</option> <option value="BMW">寶馬</option> <option value="Audi">奧迪</option> <option value="VW">大眾</option> </select> <img src="images/pfeil.gif" alt="有數(shù)據(jù)" /> </span> <span class="cartype"> 汽車類型: <select></select> <img src="images/pfeil.gif" alt="有數(shù)據(jù)" /> </span> <span class="wheeltype"> 車輪類型： <select></select> </span> </div> <div class="carimage"> <p><img src="images/img-loading.gif" alt="圖片裝載中" class="carloading" /></p> <p><img src="images/BMW_316ti_rha.jpg" alt="汽車圖片" class="carimg"/></p> </div> </body> </html>
修飾文件chainselect.css
.loading {
width: 400px;
/*margin-left: auto;*/
/*margin-right: auto;*/
margin: 0 auto;
visibility: hidden;
}
.loading p {
text-align: center;
}
p {
margin: 0;
}
.car {
/*width: 500px;*/
/*margin: 0 auto;*/
text-align: center;
}
.carimage {
text-align: center;
}
.cartype, .wheeltype, .carloading, .carimg, .car img {
display: none;
}
在這里，要注意屬性 display: none; 與 visibility: hidden;的區(qū)別
display: none;
使用該屬性后，HTML元素（對象）的寬度、高度等各種屬性值都將“丟失”;
visibility: hidden;
使用該屬性后，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據(jù)的空間位置仍然存在，也即是說它仍具有高度、寬度等屬性值。
JQUERY處理文件chainselect.js
$(document).ready(function(){
//找到三個(gè)下拉框
var carnameSelect = $(".carname").children("select");
var cartypeSelect = $(".cartype").children("select");
var wheeltypeSelect = $(".wheeltype").children("select");
var carimg = $(".carimg");
//給三個(gè)下拉框注冊事件
carnameSelect.change(function(){
//1.需要獲得當(dāng)前下拉框的值
var carnameValue = $(this).val();
//1.1只要第一個(gè)下拉框內(nèi)容有變化，第三個(gè)下拉框都要先隱藏起來
wheeltypeSelect.parent().hide();
//1.2將汽車圖片隱藏起來
carimg.hide().attr("src","");
//2.如果值不為空，則將下拉框的值傳送給服務(wù)器
if (carnameValue != "") {
if (!carnameSelect.data(carnameValue)) {
//對應(yīng)服務(wù)器端程序 CarJsonServlet的屬性，并將該Servlet中的數(shù)據(jù)轉(zhuǎn)換為JSON格式
$.post("CarJsonServlet",{keyword: carnameValue, type: "top"},function(data){
//2.1接收服務(wù)器返回的汽車類型 ,data為數(shù)組格式
if (data.length != 0) {
//2.2解析汽車類型的數(shù)據(jù)，填充到汽車類型的下拉框中
cartypeSelect.html("");
$("<option value=''>請選擇汽車類型</option>").appendTo(cartypeSelect);
for (var i = 0; i < data.length; i++) {
$("<option value='" + data[i] + "'>" + data[i] + "</option>").appendTo(cartypeSelect);
}
//2.2.1汽車類型的下拉框顯示出
cartypeSelect.parent().show();
//2.2.2第一個(gè)下拉框后面的指示圖片顯示出來
carnameSelect.next().show();
} else {
//2.3沒有任何汽車類型的數(shù)據(jù)
cartypeSelect.parent().hide();
carnameSelect.next().hide();
}
carnameSelect.data(carnameValue, data);
}, "json");
}
} else {
//3.如果值為空，那么第二個(gè)下拉框所在span要隱藏起來，第一個(gè)下拉框后面的指示圖片也要隱藏
cartypeSelect.parent().hide();
carnameSelect.next().hide();
}
});
cartypeSelect.change(function(){
//1.需要獲得當(dāng)前下拉框的值
var cartypeValue = $(this).val();
//1.1將汽車圖片隱藏起來
carimg.hide().attr("src","");
//2.如果值不為空，則將下拉框的值傳送給服務(wù)器
if (cartypeValue != "") {
if (!cartypeSelect.data(cartypeValue)) {
$.post("CarJsonServlet",{keyword: cartypeValue, type: "sub"},function(data){
//2.1接收服務(wù)器返回的汽車類型
if (data.length != 0) {
//2.2解析汽車類型的數(shù)據(jù)，填充到車輪類型的下拉框中
wheeltypeSelect.html("");
$("<option value=''>請選擇車輪類型</option>").appendTo(wheeltypeSelect);
for (var i = 0; i < data.length; i++) {
$("<option value='" + data[i] + "'>" + data[i] + "</option>").appendTo(wheeltypeSelect);
}
//2.2.1車輪類型的下拉框顯示出
wheeltypeSelect.parent().show();
//2.2.2第二個(gè)下拉框后面的指示圖片顯示出來
cartypeSelect.next().show();
} else {
//2.3沒有任何汽車類型的數(shù)據(jù)
wheeltypeSelect.parent().hide();
cartypeSelect.next().hide();
}
cartypeSelect.data(cartypeValue, data);
}, "json");
}
} else {
//3.如果值為空，那么第三個(gè)下拉框所在span要隱藏起來，第二個(gè)下拉框后面的指示圖片也要隱藏
wheeltypeSelect.parent().hide();
cartypeSelect.next().hide();
}
});
wheeltypeSelect.change(function(){
//1.獲取車輪類型
var wheeltypeValue = $(this).val();
//2.根據(jù)汽車廠商名稱，汽車型號和車輪類型得到汽車圖片的文件名
var carnameValue = carnameSelect.val();
var cartypeValue = cartypeSelect.val();
var carimgname = carnameValue + "_" + cartypeValue + "_" + wheeltypeValue + ".jpg";
//3.顯示出loading的圖片
carimg.hide();
$(".carloading").show();
//4.通過Javascript中的Image對象預(yù)裝載圖片
var cacheimg = new Image();
$(cacheimg).attr("src","images/" + carimgname).load(function(){
//隱藏loading圖片
$(".carloading").hide();
//顯示汽車圖片
carimg.attr("src","images/" + carimgname).show();
});
//3.修改汽車圖片節(jié)點(diǎn)的src的值，讓汽車圖片顯示出來
//carimg.attr("src","images/" + carimgname).show();
//4.使汽車圖片的節(jié)點(diǎn)顯示出來
});
//給數(shù)據(jù)裝載中的節(jié)點(diǎn)定義ajax事件，實(shí)現(xiàn)動(dòng)畫提示效果
$(".loading").ajaxStart(function(){
$(this).css("visibility","visible");
$(this).animate({
opacity: 1
},0);
}).ajaxStop(function(){
$(this).animate({
opacity: 0
},500);
});
})
問題？？？：$("<option value=''>請選擇汽車類型</option>").appendTo(cartypeSelect);這里出現(xiàn)中文亂碼怎么解決？？？
服務(wù)器端CarJsonServlet
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
public class CarJsonServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//解決中文亂碼
response.setHeader("Cache-Control", "no-cache");
response.setContentType("text/json;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
//得到type，keyword的值
String type = request.getParameter("type");
String keyword = request.getParameter("keyword");
JSONArray jsonArrayResult = new JSONArray();
if ("top".equals(type)) {
if ("BMW".equals(keyword)) {
jsonArrayResult.add("316ti");
jsonArrayResult.add("6ercupe");
} else if ("Audi".equals(keyword)) {
jsonArrayResult.add("tt");
} else if ("VW".equals(keyword)) {
jsonArrayResult.add("Golf4");
}
} else if ("sub".equals(type)) {
if ("tt".equals(keyword)) {
jsonArrayResult.add("rha");
jsonArrayResult.add("rhb");
jsonArrayResult.add("rhc");
} else if ("316ti".equals(keyword)) {
jsonArrayResult.add("rha");
jsonArrayResult.add("rhb");
} else if ("6ercupe".equals(keyword)) {
jsonArrayResult.add("rha");
jsonArrayResult.add("rhb");
jsonArrayResult.add("rhc");
} else if ("Golf4".equals(keyword)) {
jsonArrayResult.add("rha");
jsonArrayResult.add("rhb");
}
}
PrintWriter out = response.getWriter();
out.write(jsonArrayResult.toString());
out.flush();
out.close();
}
}
配置文件web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> <display-name></display-name> <servlet> <servlet-name>CarJsonServlet</servlet-name> <servlet-class>CarJsonServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>CarJsonServlet</servlet-name> <url-pattern>/CarJsonServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
本節(jié)學(xué)到的JQuery及其他開發(fā)知識：
1.img標(biāo)簽的alt屬性要寫上，在圖片尚未裝載進(jìn)來或圖片不存在時(shí)，這個(gè)屬性的文字信息會顯示出來
2.select表示下拉框，下拉框的每一項(xiàng)都是一個(gè)option，option開始結(jié)尾標(biāo)簽中的內(nèi)容會顯示在頁面上，value屬性的值則是用于在JQuery中用val方法獲取并發(fā)送給服務(wù)器的。定義了selected的屬性值為selected時(shí)，表示當(dāng)前option被選中
3.div元素居中顯示的方法：給div設(shè)定寬度，然后margin-left和margin-right的值都為auto。簡寫方法是margin: 0 auto;
4.html的p標(biāo)簽表示一個(gè)段落的內(nèi)容，其中的內(nèi)容會獨(dú)占一行或多行，后面的內(nèi)容會另起一行顯示
5.為了讓p中文字和圖片居中，可以使用text-align屬性，屬性值為center。p標(biāo)簽?zāi)J(rèn)有margin-top和margin-bottom的值，需要的話可以通過css清除
6.visibility的屬性值為hidden時(shí)，元素隱藏，但是和display為none不同的是，在頁面中仍然占據(jù)一定空間，只是不顯示
7.多個(gè)選擇器如果有相同的屬性值，可以放在一起定義，選擇器之間用逗號分割
8.change方法對應(yīng)標(biāo)準(zhǔn)Javascript中的onchange事件，可以處理下拉框內(nèi)容變化的事件
9.parent方法可以獲得一個(gè)節(jié)點(diǎn)的父節(jié)點(diǎn)
10.next方法可以獲得一個(gè)節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)，對應(yīng)的previous方法可以獲得一個(gè)節(jié)點(diǎn)的上一個(gè)兄弟節(jié)點(diǎn)
11.$.post方法可以和服務(wù)器端發(fā)起post的異步請求。第一個(gè)參數(shù)是請求的服務(wù)器端地址，第二個(gè)參數(shù)是發(fā)送給服務(wù)器端的數(shù)據(jù)，參數(shù)是Javascript的對象，采用名值對的方式表示，第三個(gè)參數(shù)是回調(diào)方法，第四個(gè)參數(shù)指示服務(wù)器端返回的數(shù)據(jù)類型，JQuery會根據(jù)這個(gè)參數(shù)幫我們進(jìn)行轉(zhuǎn)換。get方法只有第二個(gè)參數(shù)不同，其他幾個(gè)參數(shù)用法相同
12.Javascript中的簡單對象定義方式是{key1: value1, key2: value2}
13.JSON的數(shù)據(jù)格式其實(shí)就是Javascript中的一個(gè)對象或數(shù)據(jù)定義的文本格式內(nèi)容，比如{key1: value1, key2: [1,2,3]}或[1,2,{key2:
value2}]
14.可以直接$(“<option></option>”)的方法來建立下拉框中的選項(xiàng)，然后用appendTo這樣的方法加入到下拉框中
15.attr方法可以設(shè)置或獲取某一個(gè)節(jié)點(diǎn)的屬性值
16.ajaxStart在每一個(gè)JQuery發(fā)出的ajax請求開始前執(zhí)行，ajaxStop在JQuery隊(duì)列中所有的ajax請求結(jié)束后執(zhí)行，ajaxComplete在每一個(gè)JQuery發(fā)出的ajax請求結(jié)束后執(zhí)行
17.fadeOut和fadeIn可以實(shí)現(xiàn)淡出淡入的效果，參數(shù)內(nèi)容和slideUp，slideDown方法類似。
18.animate方法可以實(shí)現(xiàn)任意的動(dòng)畫效果，可以控制某個(gè)css屬性在某個(gè)時(shí)間內(nèi)進(jìn)行變化，從而達(dá)到動(dòng)畫的效果
19.opacity可以改變元素的透明度，IE中使用過濾器實(shí)現(xiàn)，100表示完全顯示，0表示完全透明，非IE瀏覽器使用opacity屬性，1表示完全顯示，0表示透明。JQuery在animate方法中屏蔽了瀏覽器差異，直接使用opacity就可以達(dá)到淡入淡出的效果。
20.data方法可以用于緩存數(shù)據(jù)。緩存可以提高系統(tǒng)的運(yùn)行效率，降低服務(wù)器端的負(fù)荷
21.可以使用Javascript中的Image對象來預(yù)裝載圖片，這樣可以知道圖片何時(shí)裝載完成，以便給出一些圖片裝載的提示信息。
22.load方法可以對應(yīng)Javascript中的onload事件，本例中用于捕捉圖片加載完成的事件
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
- javascript實(shí)現(xiàn)省市區(qū)三級聯(lián)動(dòng)下拉框菜單
- 省市區(qū)三級聯(lián)動(dòng)下拉框菜單javascript版
- jsp從數(shù)據(jù)庫獲取數(shù)據(jù)填充下拉框?qū)崿F(xiàn)二級聯(lián)動(dòng)菜單的方法
- js實(shí)現(xiàn)的下拉框二級聯(lián)動(dòng)效果
- js 自定義的聯(lián)動(dòng)下拉框
- extJs 下拉框聯(lián)動(dòng)實(shí)現(xiàn)代碼
- JavaScript Ajax Json實(shí)現(xiàn)上下級下拉框聯(lián)動(dòng)效果實(shí)例代碼
- 原生JavaScript實(shí)現(xiàn)動(dòng)態(tài)省市縣三級聯(lián)動(dòng)下拉框菜單實(shí)例代碼
- javascript省市區(qū)三級聯(lián)動(dòng)下拉框菜單實(shí)例演示
- js實(shí)現(xiàn)下拉框二級聯(lián)動(dòng)
相關(guān)文章
jquery實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼的倒計(jì)時(shí)代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼的倒計(jì)時(shí)代碼,需要的朋友可以參考下2014-02-02
批量修改標(biāo)簽css樣式以input標(biāo)簽為例
本節(jié)主要介紹了jquery如何批量修改標(biāo)簽css樣式以input標(biāo)簽為例,需要的朋友可以參考下2014-07-07
這篇文章主要介紹了jquery中checkbox全選失效的解決方法,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了淺談jQuery的offset()方法及示例分享的相關(guān)資料,需要的朋友可以參考下2015-07-07
利用jquery禁止外層滾動(dòng)條的滾動(dòng)
這篇文章主要給大家介紹了利用jquery如何禁止外層滾動(dòng)條的滾動(dòng),文中給出了詳細(xì)的示例代碼，相信對大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值，有需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
jQuery實(shí)現(xiàn)鼠標(biāo)移到元素上動(dòng)態(tài)提示消息框效果
當(dāng)光標(biāo)移動(dòng)到某些元素上時(shí)，會彈出像tips的提示框，這種效果想必大家都有見到過吧，下面有個(gè)不錯(cuò)的示例，大家可以感受下2013-10-10
Login頁面應(yīng)該是迅速和簡潔的，于是如果可以不產(chǎn)生回送，則不產(chǎn)生回送是最好的。2009-10-10
用 jQuery 綁定和解綁事件監(jiān)聽器都是非常簡單的，怎樣精確地解綁其中一個(gè)監(jiān)聽器？我們需要了解一下事件的命名空間，感興趣的朋友不要錯(cuò)過2013-11-11
jQuery插件jQuery-JSONP開發(fā)ajax調(diào)用使用注意事項(xiàng)
jQuery-JSONP是一個(gè)支持 JSONP 調(diào)用的 jQuery 插件，使用它是因?yàn)樗С殖鲥e(cuò)時(shí)的 ajax 回調(diào)，而 jQuery 的 $.ajax 不支持，我們已經(jīng)在實(shí)際項(xiàng)目中使用，在開始使用時(shí)遇到了2個(gè)問題，在這里記錄并分享一下。2013-11-11
Jquery+ajax請求data顯示在GridView上(asp.net)
Jquery ajax請求data顯示在asp.net中GridView控件上，需要的朋友可以參考下。2010-08-08