java获取jsp页面下拉列表框_jQuery+jsp下拉框联动获取本地数据的方法(附源码)
本文实例讲述了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
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
JQuery实例-级联下拉框效果
数据装载中......
汽车厂商:
请选择汽车厂商
宝马
奥迪
大众
汽车类型:
车轮类型:
修饰文件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("");
$("请选择汽车类型").appendTo(cartypeSelect);
for (var i = 0; i < data.length; i++) {
$("" + data[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++) {
$("" + data[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, 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);
});
})
问题???:$("请选择汽车类型").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
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">
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,2,{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程序设计有所帮助。
java获取jsp页面下拉列表框_jQuery+jsp下拉框联动获取本地数据的方法(附源码)相关推荐
- bootstrap select下拉框模糊搜索和动态绑定数据解决方法
bootstrap select下拉框模糊搜索和动态绑定数据解决方法 参考文章: (1)bootstrap select下拉框模糊搜索和动态绑定数据解决方法 (2)https://www.cnblog ...
- java下拉框读取数据库数据_在一个jsp页面实现二级下拉框联动,实时读取数据库数据...
在一个jsp(SUN企业级应用的首选)页面实现二级下拉框联动,实时读取数据库数据,这个方法非常使用,只需要修改很小的地方就可以使用.设计的文件,serch.jsp(SUN企业级应用的首选),main. ...
- jsp下拉框传到html下拉框,在一个jsp页面实现二级下拉框联动
在一个jsp页面实现二级下拉框联动,实时读取数据库数据. 在一个jsp页面实现二级下拉框联动,实时读取数据库数据,这个方法非常使用,只需要修改很小的地方就可以使用.设计的文件,serch.jsp,ma ...
- 使用AJAX做一个页面导航模糊匹配下拉框
使用AJAX做一个页面导航模糊匹配下拉框 绪论:使用AJAX页面导航模糊匹配下拉框 使用软件: Vs2019 实现方式:三层架构 功能实现是下面的图片 类似就是这样,下面把主样式界面代码放出来 < ...
- java下拉框查询_Java Swing应用程序 JComboBox下拉框联动查询
在web项目中,通过下拉框.JQuery和ajax可以实现下拉框联动查询. 譬如说,当你查询某个地方时,页面上有:省份: 市区: 县乡: 街道: 查询 譬如说,你选择了省:江苏省,那么在市区中只会显示 ...
- php下拉列表框 是隐藏变色的代码,jQuery设置下拉框显示与隐藏效果的方法分析...
本文实例讲述了jQuery设置下拉框显示与隐藏效果的方法.分享给大家供大家参考,具体如下: jQuery的 hide() 和 show() 方法分别用来隐藏和显示 HTML 元素,而 toggle() ...
- 下拉框联动_058-ajax之三级联动案例分析
1 视频中的三级联动案例的功能需求是什么 页面中有三个下拉框选项,分别为省下拉框,市下拉框,区/县下拉框选择省,则市下拉框中出现对应的该省下的市信息,选择市,则区/县下拉框中出现对应的该市下面的区/县 ...
- jquery ajax下拉联动,jQuery Ajax MVC 下拉框联动
无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List TeamLeaderList = FinanceD ...
- php jq ajax 4个下拉框联动案列,AJAX_AJAX实现下拉框联动,想当年,为了实现三级联动, - phpStudy...
AJAX实现下拉框联动 想当年,为了实现三级联动,找个js高手些了N多代码才搞定,但是很慢,因为一次要将所有的选项取来,然后排序,查找动态显示. 现在使用AJAX真是太方便了,下面做了个简单例子,实现 ...
- 根据下拉框的内容筛选数据
首先查询出来你需要的数据:var varLinq = -------; 声明一个空的字符串:string Lists = ""; For循环上面查询出来的数据,把查询数据放入到一个 ...
最新文章
- 分布式概念-中心化副本控制机制
- soap协议_Go和SOAP
- tensorflow http调用_《TensorFlow 内核剖析》笔记——系统架构
- 【BZOJ4543】【POI2014】Hotel加强版(长链剖分)
- MYSQL中的空格及大小写问题
- _GUN_SOURCE宏
- 完美世界:实习生已排除冠状病毒感染性肺炎可能
- ngx_http_headers_module模块add_header和expires指令
- 安装emmet时pyv8下载失败
- icp许可证到期续期注意事项
- 帝国CMS教程,使用灵动标签调用上一篇下一篇的文章标题图片的方法
- matlab能输入铁心参数,变压器铁心剩磁预测研究
- Android依赖arr包 gradle7.0
- 057.(2.26)遇到人生低谷期该怎么度过?
- python编程手机游戏_有哪些python写的游戏
- Mysql 备份工具XtraBackup增量备份
- java版tp指令,VAG TP 2.0完整的AT命令列表
- 一年前, 打了一份关于谷歌英雄迟暮的草稿, 终究和它一起迟暮了
- jsjs调用app下载或者打开app 实现有所变动
- 无法安全地连接到此页面,这可能是因为该站点使用过期的或不安全的 TLS 安全设置.
热门文章
- BloomFilter, Count-Min Sketch算法
- java.lang.UnsupportedClassVersionError : Unsupported major.minor version 52.0
- scala implicit隐式转化与隐式参数
- html----选项卡自动切换以及鼠标悬停时停止(js)
- spring boot 中文文档_已献出膝盖!GitHub上的宝藏级SpringBoot核心文档,讲得太清晰了...
- linux进程泄漏如何定位,定位Linux下定位进程被谁KILL
- netbeans写登录界面java_NetBeans 界面美化与字体设置
- ios苹果应用ipa一键签名工具_ios签名何以做到不越狱不上架也能安装ipa文件?
- android 3dtouch插件,iOS-3DTouch的简单实现
- linux acpidtd 进程,clover引导卡在该图上了,求资助