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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:27 PM

jquery jsp

この記事の例では、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/imghw/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/imghw/default1.png"  data-src="images/pfeil.gif"  class="lazy" alt="有数据" />
  </span>
  <span class="cartype">
  汽车类型:
  <select></select>
  <img src="/static/imghw/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/imghw/default1.png"  data-src="images/img-loading.gif"  alt="图片装载中" /></p>
  <p><img class="carimg lazy"  src="/static/imghw/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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7469

CakePHP チュートリアル

1376

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

jQueryのリファレンスメソッドを詳しく解説：クイックスタートガイド Feb 27, 2024 pm 06:45 PM

jQuery 参照方法の詳細説明: クイックスタートガイド jQuery は、Web サイト開発で広く使用されている人気のある JavaScript ライブラリであり、JavaScript プログラミングを簡素化し、開発者に豊富な機能を提供します。この記事では、jQuery の参照方法を詳しく紹介し、読者がすぐに使い始めるのに役立つ具体的なコード例を示します。 jQuery の導入まず、HTML ファイルに jQuery ライブラリを導入する必要があります。 CDN リンクを通じて導入することも、ダウンロードすることもできます

jQueryで要素の高さ属性を削除するにはどうすればよいですか? Feb 28, 2024 am 08:39 AM

jQueryで要素の高さ属性を削除するにはどうすればよいですか?フロントエンド開発では、要素の高さ属性を操作する必要が生じることがよくあります。要素の高さを動的に変更する必要がある場合や、要素の高さ属性を削除する必要がある場合があります。この記事では、jQuery を使用して要素の高さ属性を削除する方法と、具体的なコード例を紹介します。 jQuery を使用して高さ属性を操作する前に、まず CSS の高さ属性を理解する必要があります。 height 属性は要素の高さを設定するために使用されます

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエストメソッドを使用した具体的なコード例です。まず、jQuery ライブラリファイルが含まれていることを確認してから、$.ajax({u

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキストコンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリファイルを導入し、次のコードがページに導入されていることを確認する必要があります: &lt

jQuery を使用してすべての a タグのテキストコンテンツを変更する Feb 28, 2024 pm 05:42 PM

タイトル: jQuery を使用して、すべての a タグのテキストコンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンクタグ (タグ) のテキストコンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。

JSPページング関数の実装方法 Mar 04, 2024 pm 04:40 PM

実装手順: 1. JSP ページに JSTL タグライブラリを導入する; 2. データベースからデータを取得する; 3. データをページングする; 4. ページにページングナビゲーションバーを表示する; 5. 現在のページに応じて番号を表示する番号と各ページを指定し、ページングデータから対応するデータを取得してページ上に表示するだけです。

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? Feb 29, 2024 am 09:03 AM

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery を使用して DOM 要素を操作する場合、要素に特定の属性があるかどうかを判断する必要がある状況がよく発生します。この場合、jQuery が提供するメソッドを使用してこの関数を簡単に実装できます。以下では、jQuery 要素が特定の属性を持つかどうかを判断するために一般的に使用される 2 つの方法を紹介し、具体的なコード例を添付します。方法 1: attr() メソッドと typeof 演算子 // を使用して、要素に特定の属性があるかどうかを判断します

JSP を PHP に置き換えることはできますか? Mar 21, 2024 am 11:03 AM

JSP を PHP に置き換えることはできますか? JSP (JavaServerPages) と PHP (HypertextPreprocessor) は、Web ページコンテンツを動的に生成するために一般的に使用されるサーバー側スクリプト言語です。それぞれに独自の特徴と利点がありますが、実際のアプリケーションでは完全に相互に置き換えることができますか?この記事では、2 つの利点と欠点を分析し、具体的なコード例を通じて比較します。まずはJSPとPHPそれぞれの特徴を見ていきましょう。 JSP は Java ベースの

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック