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

2019-11-20 11:05:07

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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事件，本例中用于捕捉图片加载完成的事件