首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
Javascript操作cookie的函数代码
Oct 03 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
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
S2000(3) YB235(1) MX500(1) PL660(1) YB400(2) YB217(1) 直流胆(1) 森海(1) 南麂列岛(1) 台湾(1)
You might like
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
javascript中的缓动效果实现程序
2012/12/29 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
从零学习node.js之文件操作（三）
2017/02/21 Javascript
详解nodejs实现本地上传图片并预览功能（express4.0+）
2017/06/28 NodeJs
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
解决python写的windows服务不能启动的问题
2014/04/15 Python
python实现简单flappy bird
2018/12/24 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
html5绘制时钟动画
2014/12/15 HTML / CSS
医院护士的求职信
2014/01/03 职场文书
求职信范文大全
2014/05/26 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js