jQuery jspドロップダウンボックス連携によるローカルデータ取得方法(ソースコード添付)

ホームページ

ウェブフロントエンド

jsチュートリアル

jQuery jspドロップダウンボックス連携によるローカルデータ取得方法(ソースコード添付)_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:27 PM

jqueryjsp

この記事の例では、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="/static/imghwm/default1.png"  data-src="images/data-loading.gif"  class="lazy" 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="/static/imghwm/default1.png"  data-src="images/pfeil.gif"  class="lazy" alt="有数据" />
  </span>
  <span class="cartype">
  汽车类型:
  <select></select>
  <img src="/static/imghwm/default1.png"  data-src="images/pfeil.gif"  class="lazy" alt="有数据" />
  </span>
  <span class="wheeltype">
  车轮类型：
  <select></select>
  </span>
 </div>
 <div class="carimage">
  <p><img class="carloading lazy"  src="/static/imghwm/default1.png"  data-src="images/img-loading.gif"  alt="图片装载中" /></p>
  <p><img class="carimg lazy"  src="/static/imghwm/default1.png"  data-src="images/BMW_316ti_rha.jpg"  alt="汽车图片"/></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);ここで中国語の文字化けを解決するにはどうすればよいですか？ ? ?

サーバー側 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

本節學到的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程式設計有所幫助。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか？Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

See all articles