jQuery+jsp下拉框聯動擷取本機資料的方法(附源碼)_jquery

來源:互聯網
上載者:User

本文執行個體講述了jQuery+jsp下拉框聯動擷取本機資料的方法。分享給大家供大家參考,具體如下:

JQuery下拉框聯動很好的體現了Ajax的按需取資料的要求,減小資料的互動量。(點擊此處下載原始碼)

下面的執行個體使用Json將伺服器端的類或者對象轉換為JSON格式,主要運用了6個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

下面貼上實驗圖,並詳細講解一下主要代碼

顯示頁面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執行個體-級聯下拉框效果</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="資料裝載中" /></p>  <p>資料裝載中......</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="有資料" />  </span>  <span class="cartype">  汽車類型:  <select></select>  <img src="images/pfeil.gif" alt="有資料" />  </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;的區別

display: none;

使用該屬性後,HTML元素(對象)的寬度、高度等各種屬性值都將“丟失”;

visibility: hidden;

使用該屬性後,HTML元素(對象)僅僅是在視覺上看不見(完全透明),而它所佔據的空間位置仍然存在,也即是說它仍具有高度、寬度等屬性值。

JQUERY處理檔案chainselect.js

$(document).ready(function(){ //找到三個下拉框 var carnameSelect = $(".carname").children("select"); var cartypeSelect = $(".cartype").children("select"); var wheeltypeSelect = $(".wheeltype").children("select"); var carimg = $(".carimg"); //給三個下拉框註冊事件 carnameSelect.change(function(){ //1.需要獲得當前下拉框的值 var carnameValue = $(this).val(); //1.1隻要第一個下拉框內容有變化,第三個下拉框都要先隱藏起來 wheeltypeSelect.parent().hide(); //1.2將汽車圖片隱藏起來 carimg.hide().attr("src",""); //2.如果值不為空白,則將下拉框的值傳送給伺服器 if (carnameValue != "") {  if (!carnameSelect.data(carnameValue)) {  //對應伺服器端程式 CarJsonServlet的屬性,並將該Servlet中的資料轉換為JSON格式  $.post("CarJsonServlet",{keyword: carnameValue, type: "top"},function(data){   //2.1接收伺服器返回的汽車類型 ,data為數組格式   if (data.length != 0) {   //2.2解析汽車類型的資料,填充到汽車類型的下拉框中   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第一個下拉框後面的指示圖片顯示出來   carnameSelect.next().show();   } else {   //2.3沒有任何汽車類型的資料   cartypeSelect.parent().hide();   carnameSelect.next().hide();   }   carnameSelect.data(carnameValue, data);  }, "json");  } } else {  //3.如果值為空白,那麼第二個下拉框所在span要隱藏起來,第一個下拉框後面的指示圖片也要隱藏  cartypeSelect.parent().hide();  carnameSelect.next().hide(); } }); cartypeSelect.change(function(){ //1.需要獲得當前下拉框的值 var cartypeValue = $(this).val(); //1.1將汽車圖片隱藏起來 carimg.hide().attr("src",""); //2.如果值不為空白,則將下拉框的值傳送給伺服器 if (cartypeValue != "") {  if (!cartypeSelect.data(cartypeValue)) {  $.post("CarJsonServlet",{keyword: cartypeValue, type: "sub"},function(data){   //2.1接收伺服器返回的汽車類型   if (data.length != 0) {   //2.2解析汽車類型的資料,填充到車輪類型的下拉框中   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第二個下拉框後面的指示圖片顯示出來   cartypeSelect.next().show();   } else {   //2.3沒有任何汽車類型的資料    wheeltypeSelect.parent().hide();   cartypeSelect.next().hide();   }   cartypeSelect.data(cartypeValue, data);  }, "json");  }  } else {  //3.如果值為空白,那麼第三個下拉框所在span要隱藏起來,第二個下拉框後面的指示圖片也要隱藏  wheeltypeSelect.parent().hide();  cartypeSelect.next().hide(); } }); wheeltypeSelect.change(function(){ //1.擷取車輪類型 var wheeltypeValue = $(this).val(); //2.根據汽車廠商名稱,汽車型號和車輪類型得到汽車圖片的檔案名稱 var carnameValue = carnameSelect.val(); var cartypeValue = cartypeSelect.val(); var carimgname = carnameValue + "_" + cartypeValue + "_" + wheeltypeValue + ".jpg"; //3.顯示出loading的圖片 carimg.hide(); $(".carloading").show(); //4.通過Javascript中的Image對象預裝載圖片 var cacheimg = new Image(); $(cacheimg).attr("src","images/" + carimgname).load(function(){  //隱藏loading圖片  $(".carloading").hide();  //顯示汽車圖片  carimg.attr("src","images/" + carimgname).show(); }); //3.修改汽車圖片節點的src的值,讓汽車圖片顯示出來 //carimg.attr("src","images/" + carimgname).show(); //4.使汽車圖片的節點顯示出來 }); //給資料裝載中的節點定義ajax事件,實現動畫提示效果 $(".loading").ajaxStart(function(){ $(this).css("visibility","visible"); $(this).animate({  opacity: 1 },0); }).ajaxStop(function(){ $(this).animate({  opacity: 0 },500); });})

問題???:$("<option value=''>請選擇汽車類型</option>").appendTo(cartypeSelect);這裡出現中文亂碼怎麼解決???

伺服器端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>

本節學到的JQuery及其他開發知識:

1.img標籤的alt屬性要寫上,在圖片尚未裝載進來或圖片不存在時,這個屬性的文字資訊會顯示出來
2.select表示下拉框,下拉框的每一項都是一個option,option開始結尾標籤中的內容會顯示在頁面上,value屬性的值則是用於在JQuery中用val方法擷取並發送給伺服器的。定義了selected的屬性值為selected時,表示當前option被選中
3.div元素置中顯示的方法:給div設定寬度,然後margin-left和margin-right的值都為auto。簡寫方法是margin: 0 auto;
4.html的p標籤表示一個段落的內容,其中的內容會獨佔一行或多行,後面的內容會另起一行顯示
5.為了讓p中文字和圖片置中,可以使用text-align屬性,屬性值為center。p標籤預設有margin-top和margin-bottom的值,需要的話可以通過css清除
6.visibility的屬性值為hidden時,元素隱藏,但是和display為none不同的是,在頁面中仍然佔據一定空間,只是不顯示
7.多個選取器如果有相同的屬性值,可以放在一起定義,選取器之間用逗號分割
8.change方法對應標準Javascript中的onchange事件,可以處理下拉框內容變化的事件
9.parent方法可以獲得一個節點的父節點
10.next方法可以獲得一個節點的下一個兄弟節點,對應的previous方法可以獲得一個節點的上一個兄弟節點
11.$.post方法可以和伺服器端發起post的非同步請求。第一個參數是請求的伺服器端地址,第二個參數是發送給伺服器端的資料,參數是Javascript的對象,採用名值對的方式表示,第三個參數是回調方法,第四個參數指示伺服器端返回的資料類型,JQuery會根據這個參數幫我們進行轉換。get方法只有第二個參數不同,其他幾個參數用法相同
12.Javascript中的簡單對象定義方式是{key1: value1, key2: value2}
13.JSON的資料格式其實就是Javascript中的一個對象或資料定義的文字格式設定內容,比如{key1: value1, key2: [1,2,3]}或[1,2,{key2:
value2}]
14.可以直接$(“<option></option>”)的方法來建立下拉框中的選項,然後用appendTo這樣的方法加入到下拉框中
15.attr方法可以設定或擷取某一個節點的屬性值
16.ajaxStart在每一個JQuery發出的ajax請求開始前執行,ajaxStop在JQuery隊列中所有的ajax請求結束後執行,ajaxComplete在每一個JQuery發出的ajax請求結束後執行
17.fadeOut和fadeIn可以實現淡出淡入的效果,參數內容和slideUp,slideDown方法類似。
18.animate方法可以實現任意的動畫效果,可以控制某個css屬性在某個時間內進行變化,從而達到動畫的效果
19.opacity可以改變元素的透明度,IE中使用過濾器實現,100表示完全顯示,0表示完全透明,非IE瀏覽器使用opacity屬性,1表示完全顯示,0表示透明。JQuery在animate方法中屏蔽了瀏覽器差異,直接使用opacity就可以達到淡入淡出的效果。
20.data方法可以用於快取資料。緩衝可以提高系統的運行效率,降低伺服器端的負荷
21.可以使用Javascript中的Image對象來預裝載圖片,這樣可以知道圖片何時裝載完成,以便給出一些圖片裝載的提示資訊。
22.load方法可以對應Javascript中的onload事件,本例中用於捕捉圖片載入完成的事件

希望本文所述對大家jQuery程式設計有所協助。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.