ホームページ > 記事 > ウェブフロントエンド > jQuery jspドロップダウンボックス連携によるローカルデータ取得方法(ソースコード添付)_jquery
jQuery jspドロップダウンボックス連携によるローカルデータ取得方法(ソースコード添付)_jquery
- WBOYオリジナル
- 2016-05-16 15:27:471747ブラウズ
この記事の例では、jQuery jsp ドロップダウン ボックスをリンクしてローカル データを取得する方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
JQuery ドロップダウン ボックスのリンクは、オンデマンド データ取得に対する Ajax の要件を適切に反映し、データ対話の量を削減します。 (ここをクリック してソース コードをダウンロード )
次の例では、主に 6 つの jar パッケージを使用して、Json を使用してサーバー側のクラスまたはオブジェクトを JSON 形式に変換します
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="jQuery jspドロップダウンボックス連携によるローカルデータ取得方法(ソースコード添付)_jquery" /></p> <p>jQuery jspドロップダウンボックス連携によるローカルデータ取得方法(ソースコード添付)_jquery......</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;
}
ここで、 属性の表示: none と可視性: hidden; の違いに注意してください。 表示: なし;
この属性を使用すると、HTML 要素 (オブジェクト) の幅、高さ、およびその他の属性値が「失われます」;
可視性: 非表示;
この属性を使用した後、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.使汽车图片的节点显示出来
});
//给jQuery jspドロップダウンボックス連携によるローカルデータ取得方法(ソースコード添付)_jquery的节点定义ajax事件，实现动画提示效果
$(".loading").ajaxStart(function(){
$(this).css("visibility","visible");
$(this).animate({
opacity: 1
},0);
}).ajaxStop(function(){
$(this).animate({
opacity: 0
},500);
});
})
質問はありますか？ ? ? :$("").appendTo(cartypeSelect);ここで中国語の文字化けを解決するにはどうすればよいですか？ ? ?
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();
}
}
本節學到的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程式設計有所幫助。