집 > 기사 > 웹 프론트엔드 > 로컬 데이터를 얻기 위한 jQuery jsp 드롭다운 박스 연결 방법(소스코드 첨부)_jquery

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

WBOY원래의: 2016-05-16 15:27:471747검색

이 기사의 예에서는 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="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;
}

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

디스플레이: 없음;

이 속성을 사용한 후에는 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 プログラミングのすべての人に役立つことを願っています。

성명：

이전 기사：의사 elements_javascript 기술 전후에 js 효과를 설정하는 방법다음 기사：의사 elements_javascript 기술 전후에 js 효과를 설정하는 방법

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

관련 기사