로컬 데이터를 얻기 위한 jQuery jsp 드롭다운 박스 연결 방법(소스코드 첨부)

집

웹 프론트엔드

JS 튜토리얼

로컬 데이터를 얻기 위한 jQuery jsp 드롭다운 박스 연결 방법(소스코드 첨부)_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:27 PM

jqueryjsp

이 기사의 예에서는 jQuery jsp 드롭다운 상자를 연결하여 로컬 데이터를 얻는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

JQuery 드롭다운 상자 연결은 주문형 데이터 수집에 대한 Ajax의 요구 사항을 잘 반영하고 데이터 상호 작용의 양을 줄입니다. (소스 코드를 다운로드하려면 여기를 클릭하세요)

다음 예에서는 Json을 사용하여 주로 6개의 jar 패키지를 사용하여 서버측 클래스 또는 객체를 JSON 형식으로 변환합니다

commons-beanutils-1.7.0.jar
커먼즈-컬렉션-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;
}

여기서 표시 속성의 차이점에 주목하세요.

디스플레이: 없음;

이 속성을 사용한 후에는 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

<&#63;xml version="1.0" encoding="UTF-8"&#63;>
<web-app version="3.0" 
 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">
 <display-name></display-name>
 <servlet> 
 <servlet-name>CarJsonServlet</servlet-name> 
 <servlet-class>CarJsonServlet</servlet-class> 
 </servlet> 
 <servlet-mapping> 
 <servlet-name>CarJsonServlet</servlet-name> 
 <url-pattern>/CarJsonServlet</url-pattern> 
 </servlet-mapping> 
 <welcome-file-list>
 <welcome-file>index.jsp</welcome-file>
 </welcome-file-list>
</web-app>

このセクションで学習する JQuery およびその他の開発知識:

1. img タグの alt 属性を記述する必要があります。画像が読み込まれていない場合、または画像が存在しない場合、この属性のテキスト情報が表示されます。 2.select はドロップダウンボックスを表し、オプションの開始タグと終了タグの内容がページに表示されます。 JQuery の val メソッドを使用してサーバーに送信します。 selected の属性値が selected として定義されている場合、現在のオプションが選択されていることを意味します
3. div 要素を中央に表示する方法: div の幅を設定し、margin-left と margin-right の値を両方とも auto にします。略語は margin: 0 auto;
です。 4. htmlのpタグは段落の内容を表し、その内容は1行以上を占め、次の内容は別の行に表示されます
。 5. p 内のテキストと画像を中央に配置するには、text-align 属性を使用できます。属性値は center です。 p タグにはデフォルトで margin-top と margin-bottom の値がありますが、必要に応じて CSS を通じてクリアできます
6. Visibility 属性値が hidden の場合、要素は非表示になりますが、なしの表示とは異なり、ページ上の一定のスペースを占有しますが、
は表示されません。 7. 複数のセレクターが同じ属性値を持つ場合、それらをまとめて定義し、カンマで区切ることができます
8.changeメソッドは標準JavaScriptのonchangeイベントに相当し、ドロップダウンボックスの内容が変更されたときのイベントを処理できます
9.parentメソッドはノード
の親ノードを取得できます。 10. 次のメソッドはノードの次の兄弟ノードを取得でき、対応する前のメソッドはノードの前の兄弟ノードを取得できます
11. $.post メソッドは、サーバーとの非同期ポストリクエストを開始できます。最初のパラメータはリクエストのサーバー側アドレス、2 番目のパラメータはサーバに送信されるデータ、パラメータは名前と値のペアの形式で表現される Javascript オブジェクト、3 番目のパラメータはコールバックメソッドです。 4 番目のパラメーターは、サーバーによって返されるデータ型を示します。JQuery は、このパラメーターに従って変換するのに役立ちます。 get メソッドは 2 番目のパラメーターのみが異なり、他のパラメーターの使用法は同じです
12.JavaScriptでの簡単なオブジェクト定義方法は{key1:value1, key2:value2}
です 13. JSON のデータ形式は、実際には Javascript のオブジェクトまたはデータで定義されたテキスト形式のコンテンツです (例: {key1: value1, key2: [1,2,3]} または [1,2,{key2: 値2}]
14. $("") メソッドを直接使用してドロップダウンボックスにオプションを作成し、appendTo メソッドを使用してそれらをドロップダウンボックスに追加できます
15. attr メソッドはノードの属性値を設定または取得できます
16.ajaxStart は JQuery によって発行された各 ajax リクエストが開始される前に実行され、ajaxStop は JQuery キュー内のすべての ajax リクエストが完了した後に実行され、ajaxComplete は JQuery によって発行された各 ajax リクエストが完了した後に実行されます
17. fadeOut および fadeIn は、フェードアウトおよびフェードインの効果を実現できます。パラメーターの内容は、slideUp および slideDown メソッドと同様です。
18. animate メソッドは任意のアニメーション効果を実現でき、アニメーション効果を達成するために特定の CSS 属性を一定時間内に変更するように制御できます
19.不透明度は要素の透明度を変更できます。100 は完全に表示され、0 は完全に透明を意味します。 JQuery は、animate メソッドでブラウザーの違いをブロックし、不透明度を直接使用してフェードインおよびフェードアウト効果を実現できます。
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의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AM

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

Python 또는 JavaScript가 더 좋습니까?Apr 06, 2025 am 12:14 AM

Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.

See all articles