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

前端之家收集整理的这篇文章主要介绍了jQuery+jsp下拉框联动获取本地数据的方法(附源码)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了jQuery+jsp下拉框联动获取本地数据的方法分享给大家供大家参考,具体如下:

JQuery下拉框联动很好的体现了Ajax的按需取数据的要求,减小数据的交互量。(点击此处代码)

下面的实例使用Json将服务器端的类或者对象转换为JSON格式,主要运用了6个jar包

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

显示页面index.jsp

<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> JQuery实例-级联下拉框<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a> <Meta http-equiv= "Content-Type" content="text/html";charset=UTF-8">
数据装载中

数据装载中......

403_37@
图片装载中

汽车<a href=图片" class="carimg"/>

修饰文件chainselect.css

在这里,要

注意属性 display: none; 与 visibility: hidden;的区别

display: none;

使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;

visibility: hidden;

使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。

JQUERY处理文件chainselect.js

注册事件 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(""); $("").appendTo(cartypeSelect); for (var i = 0; i < data.length; i++) { $("").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(""); $("").appendTo(wheeltypeSelect); for (var i = 0; i < data.length; i++) { $("").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,"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); }); })

问题???:$("").appendTo(cartypeSelect);这里出现中文乱码怎么解决???

服务器端CarJsonServlet

解决中文乱码 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

CarJsonServlet CarJsonServlet CarJsonServlet /CarJsonServlet index.jsp

本节学到的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,{key2: value2}] 14.可以直接$(“”)的方法来建立下拉框中的选项,然后用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相关文章