Servlet返回数组的案例如下:
代码 清单1.6:demo.java
rush:java;">
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;
public class ChainSelect extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request,IOException {
System .out.println("name = " + request.getPara meter("name"));
System .out.println("time = " + request.getPara meter("time"));
response.setChara cterEncoding("UTF-8");
response.setContentType("application/json; charset=utf-8");
String jsonStr = "[\"test1\",\"test2\",\"test3\"]";
PrintWriter out = null;
try {
out = response.getWriter();
out.write(jsonStr);
} catch (IOException e) {
e.printstacktrace ();
} finally {
if (out != null) {
out.close();
}
}
}
protected void doPost(HttpServletRequest request,response);
}
}
前端jQuery代码 :
rush:js;">
$(document).ready(function(){
//发起ajax请求
$.post("../chainSelect",function(data){
for(var i = 0; i < data.length; i++) {
console.log((i+1) + " : " + data[i]);
}
},"json");
});
后台 之需要给jsonStr赋值为数组格式 而已,而前端jQuery代码 由于接收到的字符串数组,所以这里需要用遍历数组的形式来遍历。
本案例的Servlet代码 清单:
代码 清单1.7:ChainSelect.java
rush:java;">
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;
public class ChainSelect extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request,IOException {
response.setChara cterEncoding("UTF-8");
response.setContentType("application/json; charset=utf-8");
String jsonStr = this.getStr(request.getPara meter("keyword"),request.getPara meter("type"));
PrintWriter out = null;
try {
out = response.getWriter();
out.write(jsonStr);
} catch (IOException e) {
e.printstacktrace ();
} finally {
if (out != null) {
out.close();
}
}
}
private String getStr(String keyword,String type) {
String jsonStr = "";
if("top".equals(type)) {
if("BMW".equals(keyword)) {
jsonStr = "[\"316ti\",\"6ercupe\"]";
} else if("Audi".equals(keyword)) {
jsonStr = "[\"tt\"]";
} else if("VW".equals(keyword)) {
jsonStr = "[\"Golf4\"]";
}
} else if("sub".equals(type)) {
if("tt".equals(keyword)) {
jsonStr = "[\"rha\",\"rhb\",\"rhc\"]";
} else if("316ti".equals(keyword)) {
jsonStr = "[\"rha\",\"rhb\"]";
} else if("6ercupe".equals(keyword)) {
jsonStr = "[\"rha\",\"rhc\"]";
} else if("Golf4".equals(keyword)) {
jsonStr = "[\"rha\",\"rhb\"]";
}
}
return jsonStr;
}
protected void doPost(HttpServletRequest request,response);
}
}
代码 清单1.7与清单1.6的区别是,后者多了getstr() 的方法 ,该方法 用于判断前端传递过来的是一级(top)下拉框的值,还是二级(sub)下拉框的值,并根据传递的keyword返回需要的字符串。与本后台 交互的是程序清单1.8所示的代码 。
程序清单1.8:chainSelect.js
rush:js;">
/**
* 级联下拉框
效果
*/
$(document).ready(function(){
//找到三个下拉框
var carnameSelect = $(".carname").children("select");
var cartypeSelect = $(".cartype").children("select");
var wheeltypeSelect = $(".wheeltype").children("select");
carnameSelect.change(function(){
var carname = carnameSelect.val();
if(carname != "") {
//汽车厂商不为空发起ajax请求
$.post("../chainSelect",{keyword: carname,type : "top"},function(data){
if(data != null && data.length != 0) {
//清除上一次change的内容
cartypeSelect.html("");
$("请选择汽车类型 ").appendTo(cartypeSelect);
for(var i = 0; i < data.length; i++) {
$(""+data[i]+" ").appendTo(cartypeSelect);
}
$(".cartype").show();
carnameSelect.next("img").show();
}
},"json");
} else {
//3.如果值为空,那么第二个下拉框所在span要隐藏起来,第一个 下拉框后面的指示图片 也要隐藏
$(".cartype").hide();
$(".wheeltype").hide();
$(".carimage").hide();
$(this).next("img").hide();
}
});
cartypeSelect.change(function(){
var cartype = cartypeSelect.val();
if(cartype != "") {
//汽车类型不为空发起ajax请求
$.post("../chainSelect",{keyword: cartype,type : "sub"},function(data){
if(data != null && data.length != 0) {
//清除上一次change的内容
wheeltypeSelect.html("");
$("请选择车轮类型 ").appendTo(wheeltypeSelect);
for(var i = 0; i < data.length; i++) {
$(""+data[i]+" ").appendTo(wheeltypeSelect);
}
$(".wheeltype").show();
cartypeSelect.next("img").show();
}
},"json");
} else {
//汽车类型为空
$(".wheeltype").hide();
$(".carimage").hide();
$(this).next("img").hide();
}
});
wheeltypeSelect.change(function(){
//选中的车轮类型
var wheeltype = wheeltypeSelect.val();
if(wheeltype != "") {
//选中的车辆厂商
var carname = carnameSelect.val();
//选中的车辆类型
var cartype = cartypeSelect.val();
//图片 的名称
var carimgName = carname + "" + cartype + " " + wheeltype + ".jpg";
console.log("carimgName : " + carimgName);
$(".carimage").show();
$(".carimg").attr("src","../image/" + carimgName).load(function(){
//隐藏loading图片
$(".carloading").hide("slow");
});
$(".carimage p img").show("slow");
} else {
// alert("内容 为空");
// $("img").hide();
$(".carimage").hide();
}
});
//给数据装载中的节点定义ajax事件,实现动画提示 效果
$(".loading").ajaxStart(function(){
$(this).css("visibility","visible");
$(this).animate({
opacity: 1
},0);
}).ajaxStop(function(){
$(this).animate({
opacity: 0
},500);
});
});
jQuery代码 的思路是,用class选择器选择出三个下拉框,赋值给变量carnameSelect,cartypeSelect,wheeltypeSelect,默 认carnameSelect下拉框是显示 的,其他下拉框是隐藏。然后给他们三者注册 change()事件,当用户 选择下拉框的值的时候执行事件函数 体里面的内容 。这里我以第一级下拉框为例来讲解处理的过程。如果用户 选择了第一级下拉框”汽车厂商”的”宝马”,则执行如下代码 :
rush:js;">
carnameSelect.change(function(){
var carname = carnameSelect.val();
if(carname != "") {
//汽车厂商不为空发起ajax请求
$.post("../chainSelect","json");
} else {
//3.如果值为空,那么第二个下拉框所在span要隐藏起来,第
一个 下拉框后面的指示
图片 也要隐藏
$(".cartype").hide();
$(".wheeltype").hide();
$(".carimage").hide();
$(this).next("img").hide();
}
});
先将第一级下拉框内容 取出来,如果值为空,那么第二个下拉框所在span要隐藏起来,第一个 下拉框后面的指示图片 也要隐藏。如果有内容 , 则用该行代码 $.post(“../chainSelect”,type : “top”},function(data){},“json”)向上诉的Serlvet发起post请求,post的第一个 参数是Serlvet的后台地址 ,第二个参数画括号括起来的json数据,第三个参数是回调函数 ,第四个参数”json”表明发送的json数据。在回调函数 中,参数data接收Serlvet返回的值,由于Serlvet返回的是可以解析为字符串数组的数据,所以用for循环来遍历得到的数据,并生成 option新节点appenTo()插入到select之后。
程序清单1.8中,值得注意的地方还有$(“.loading”).ajaxStart(function(){}).ajaxStop(function(){}),这是为了美化汽车图片 加载的代码 。这里用到jQuery的动画专用效果 的animate(),使程序淡入淡出更加的和谐。
到此几乎把级联效果 实现了,但是如果在高并发环境下,每次用户 切换选项都向服务器发送请求,服务器的压力可能过大。所以这里我们用jQuery的缓存来保存那些已经缓存过的请求。可以使用jQuery的data()方法 。
定义和用法
从被选元素中返回附加的数据。
name 可选。规定要取回的数据的名称 。
如果没有规定名称 ,则该方法 将以对象的形式从元素中返回所有存储的数据。
向元素附加数据
name 必需。规定要设置的数据的名称 。
value 必需。规定要设置的数据的值。
data()的使用案例如程序清单1.9:
rush:xhtml;">
添加到 div 元素
获取已添加 到 div 元素的数据
加上 缓存之后的完整jQuery代码 如下程序清单。
程序清单2.0:chainSelect.js
rush:js;">
/**
* 级联下拉框
效果
*/
$(document).ready(function(){
//找到三个下拉框
var carnameSelect = $(".carname").children("select");
var cartypeSelect = $(".cartype").children("select");
var wheeltypeSelect = $(".wheeltype").children("select");
carnameSelect.change(function(){
var carname = carnameSelect.val();
if(carname != "") {
if (!carnameSelect.data(carname)) {
//汽车厂商不为空发起ajax请求
$.post("../chainSelect",function(data){
if(data != null && data.length != 0) {
//清除上一次change的内容
cartypeSelect.html("");
$("请选择汽车类型 ").appendTo(cartypeSelect);
for(var i = 0; i < data.length; i++) {
$(""+data[i]+" ").appendTo(cartypeSelect);
}
$(".cartype").show();
carnameSelect.next("img").show();
}
//将data放入缓存
carnameSelect.data(carname,data);
},"json");
} else {
//从缓存中取出数据
var data = carnameSelect.data(carname);
if(data != null && data.length != 0) {
//清除上一次change的内容
cartypeSelect.html("");
$("请选择汽车类型 ").appendTo(cartypeSelect);
for(var i = 0; i < data.length; i++) {
$(""+data[i]+" ").appendTo(cartypeSelect);
}
$(".cartype").show();
carnameSelect.next("img").show();
}
}
} else {
//3.如果值为空,那么第二个下拉框所在span要隐藏起来,第一个 下拉框后面的指示图片 也要隐藏
$(".cartype").hide();
$(".wheeltype").hide();
$(".carimage").hide();
$(this).next("img").hide();
}
});
cartypeSelect.change(function(){
var cartype = cartypeSelect.val();
if(cartype != "") {
if(!cartypeSelect.data(cartype)) {
//汽车类型不为空发起ajax请求
$.post("../chainSelect",function(data){
if(data != null && data.length != 0) {
//清除上一次change的内容
wheeltypeSelect.html("");
$("请选择车轮类型 ").appendTo(wheeltypeSelect);
for(var i = 0; i < data.length; i++) {
$(""+data[i]+" ").appendTo(wheeltypeSelect);
}
$(".wheeltype").show();
cartypeSelect.next("img").show();
}
cartypeSelect.data(cartype,"json");
} else {
var data = cartypeSelect.data(cartype);
if(data != null && data.length != 0) {
//清除上一次change的内容
wheeltypeSelect.html("");
$("请选择车轮类型 ").appendTo(wheeltypeSelect);
for(var i = 0; i < data.length; i++) {
$(""+data[i]+" ").appendTo(wheeltypeSelect);
}
$(".wheeltype").show();
cartypeSelect.next("img").show();
}
}
} else {
//汽车类型为空
$(".wheeltype").hide();
$(".carimage").hide();
$(this).next("img").hide();
}
});
wheeltypeSelect.change(function(){
//选中的车轮类型
var wheeltype = wheeltypeSelect.val();
if(wheeltype != "") {
//选中的车辆厂商
var carname = carnameSelect.val();
//选中的车辆类型
var cartype = cartypeSelect.val();
//图片 的名称
var carimgName = carname + "" + cartype + " " + wheeltype + ".jpg";
$(".carimage").show();
//通过Javascript中的Image对象预装载图片
var cacheimg = new Image();
$(cacheimg).attr("src","../image/" + carimgName).load(function(){
//隐藏loading图片
$(".carloading").hide("slow");
$(".carimg").attr("src","../image/" + carimgName);
});
$(".carimage p img").show("slow");
} else {
$(".carimage").hide();
}
});
//给数据装载中的节点定义ajax事件,实现动画提示 效果
$(".loading").ajaxStart(function(){
$(this).css("visibility",500);
});
});
用了data()之后,当用户 选择了下拉框,并不是直接奔着服务器请求而去的,而是先判断缓存是否为空,carnameSelect.data(carname)。如果为空,则发起ajax请求,并将返回的结果放进缓存carnameSelect.data(carname,data)。如果不为空,在循环添加 option节点之前data从缓存中拿到var data = carnameSelect.data(carname)。同样的,图片 的缓存放进我们的Image对象中var cacheimg = new Image(),这行代码 往后的第一行和第四行将缓存中的图片 取出并显示 出来。
代码 下载地址:nofollow " target="_blank" href="https://github.com/shizongger/JqueryInAction">https://github.com/shizongger/JqueryInAction
以上就是本文的全部内容 ,希望对大家的学习有所帮助,也希望大家多多支持 编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。