编程 Javascript

jQuery+jsp下拉框联动获取本地数据的方法(附源码)

Posted in Javascript onDecember 03, 2015

本文实例讲述了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

下面贴上实验图，并详细讲解一下主要代码

jQuery+jsp下拉框联动获取本地数据的方法(附源码)

显示页面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程序设计有所帮助。

jQuery+jsp下拉框联动获取本地数据的方法(附源码)

- Author -

牛奶、不加糖

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js 数组的for循环到底应该怎么写？

May 31 Javascript

jquery关于页面焦点的定位(文本框获取焦点时改变样式 )

Sep 10 Javascript

functional继承模式摘自javascript:the good parts

Jun 20 Javascript

jquery中dom操作和事件的实例学习-表单验证

Nov 30 Javascript

Javascript基础教程之while语句

Jan 18 Javascript

javascript实现动态表头及表列的展现方法

Jul 14 Javascript

浅谈JS中的三种字符串连接方式及其性能比较

Sep 02 Javascript

Web 开发中Ajax的Session 超时处理方法

Jan 19 Javascript

详解.vue文件中监听input输入事件（oninput）

Sep 19 Javascript

vue实现文章内容过长点击阅读全文功能的实例

Dec 28 Javascript

javascript实现的字符串转换成数组操作示例

Jun 13 Javascript

JS实现的雪花飘落特效示例

Dec 03 Javascript

jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介

Dec 03 #Javascript

详解JavaScript对象和数组

Dec 03 #Javascript

java必学必会之static关键字

Dec 03 #Javascript

详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题

Dec 03 #Javascript

继续学习javascript闭包

Dec 03 #Javascript

解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法

Dec 03 #Javascript

jQuery 1.9.1源码分析系列（十五)之动画处理

Dec 03 #Javascript