成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

導航首頁 ? 技術教程 ? jQuery+jsp下拉框聯動獲取本地數據的方法(附源碼)
全站頭部文字 我要出現在這里
jQuery+jsp下拉框聯動獲取本地數據的方法(附源碼) 686 2024-03-18   

本文實例講述了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"  />
 <script type="text/javascript" src="http://www.gimoo.net/t/1904/js/jquery.js"></script>
 <script type="text/javascript" src="http://www.gimoo.net/t/1904/js/chainselect.js"></script>
 </head>
 <body>
 <div class="loading">
  <p><img src="http://www.gimoo.net/t/1904/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="http://www.gimoo.net/t/1904/images/pfeil.gif" alt="有數據" />
  </span>
  <span class="cartype">
  汽車類型:
  <select></select>
  <img src="http://www.gimoo.net/t/1904/images/pfeil.gif" alt="有數據" />
  </span>
  <span class="wheeltype">
  車輪類型：
  <select></select>
  </span>
 </div>
 <div class="carimage">
  <p><img src="http://www.gimoo.net/t/1904/images/img-loading.gif" alt="圖片裝載中" class="carloading" /></p>
  <p><img src="http://www.gimoo.net/t/1904/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程序設計有所幫助。


主站蜘蛛池模板： 花非花电视剧演员表| 战长沙每个人的结局| 风云雄霸天下| 火花 电影| 新老澳门资料| 黄视频在线播放| 五年级小数除法竖式计算题100道| 辛鹏| 《扫描工具》观看免费| 等着我主持人| 坏孩子电影| 红海行动2在线观看| footjob videos| 薛昊婧演过的电视剧| 《起风了》数字简谱| 黄视频免费观看网站| 斯泰尔| 《速度与激情10》| 吴婷个人资料及照片| 王李丹妮三级电影| 韩国车震电影| 插树岭演员表| 电影喜宝| 渝火先孕后爱小说免费阅读| 韩佳熙的电影全部作品| 巨神战击队| 黄视频在线网站| 屠夫小姐在线播放| 刘慧茹| 隐藏的真相| 2024年计划生育家庭特别扶助| 男人上路| 七年级下册语文第八课生字拼音 | 工伤赔偿协议书| bbbbbbbbb免费毛片视频| 电视剧热播剧大全| 法证先锋2| 孙涛个人简历| 文奎| 欲海情缘| 白璐个人简介照片|

！！！站長長期在線接！！！

網站、小程序：定制開發/二次開發/仿制開發等

各種疑難雜癥解決/定制接口/定制采集等

站長微信：lxwl520520

站長QQ：1737366103