Méthode de liaison par liste déroulante jQuery jsp pour obtenir des données locales (code source joint)

L'exemple de cet article décrit la méthode de liaison de la liste déroulante jQuery jsp pour obtenir des données locales. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

La liaison par liste déroulante JQuery reflète bien les exigences d'Ajax en matière d'acquisition de données à la demande et réduit la quantité d'interaction de données. (Cliquez ici pour télécharger le code source )

L'exemple suivant utilise Json pour convertir des classes ou des objets côté serveur au format JSON, principalement en utilisant 6 packages jar

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

L'image expérimentale est jointe ci-dessous, et le code principal est expliqué en détail

Afficher la page 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="Méthode de liaison par liste déroulante jQuery jsp pour obtenir des données locales (code source joint)_jquery" /></p>
  <p>Méthode de liaison par liste déroulante jQuery jsp pour obtenir des données locales (code source joint)_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>

Copier après la connexion

Modifier le fichier 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;
}

Copier après la connexion

Ici, faites attention à la différence entre les attributs affichage : aucun et visibilité : caché

affichage : aucun ;

Après avoir utilisé cet attribut, la largeur, la hauteur et les autres valeurs d'attributde l'élément HTML (objet) seront "perdues" ;

visibilité : masquée ;

Après avoir utilisé cet attribut, l'élément HTML (objet) n'est que visuellement invisible (complètement transparent), mais la position spatiale qu'il occupe existe toujours, c'est-à-dire qu'il a toujours des valeurs d'attribut telles que la hauteur et la largeur.

Fichier de traitement 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.使汽车图片的节点显示出来
 });
 //给Méthode de liaison par liste déroulante jQuery jsp pour obtenir des données locales (code source joint)_jquery的节点定义ajax事件，实现动画提示效果
 $(".loading").ajaxStart(function(){
 $(this).css("visibility","visible");
 $(this).animate({
  opacity: 1
 },0);
 }).ajaxStop(function(){
 $(this).animate({
  opacity: 0
 },500);
 });
})

Copier après la connexion

Des questions ? ? ? :$("").appendTo(cartypeSelect);Comment résoudre les caractères chinois tronqués ici ? ? ?

CarJsonServlet côté serveur

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();
 }
}

Copier après la connexion

Fichier de configuration 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>

Copier après la connexion

이 섹션에서 배운 JQuery 및 기타 개발 지식:

1. img 태그의 alt 속성을 작성해야 합니다. 이미지가 로드되지 않았거나 이미지가 존재하지 않는 경우 해당 속성의 텍스트 정보가 표시됩니다
2.select는 드롭다운 상자를 나타냅니다. 드롭다운 상자의 각 항목은 옵션 시작 및 끝 태그의 내용이 페이지에 표시됩니다. JQuery의 val 메소드를 사용하여 서버에. selected의 속성값이 selected로 정의되면 현재 옵션이 선택되었다는 뜻이다
3. div 요소를 중앙에 표시하는 방법: div의 너비를 설정한 다음 margin-left 및 margin-right 값을 모두 자동으로 설정합니다. 약어는 margin: 0 auto;
입니다. 4. html의 p 태그는 단락의 내용을 나타냅니다. 내용은 한 줄 이상을 차지하며 다음 내용은 다른 줄에 표시됩니다
5. p에서 텍스트와 그림을 중앙에 배치하려면 text-align 속성을 사용하면 되며 속성 값은 center입니다. p 태그에는 기본적으로 margin-top 및 margin-bottom 값이 있으며 필요한 경우 CSS를 통해 지울 수 있습니다
6. 가시성 속성 값을 숨기면 요소가 숨겨지지만 없음인 표시와 달리 여전히 페이지에서 일정 공간을 차지하지만
가 표시되지 않습니다. 7. 여러 선택자가 동일한 속성 값을 갖는 경우 함께 정의하고 쉼표로 구분할 수 있습니다
8. 변경 메소드는 표준 Javascript의 onchange 이벤트에 해당하며 드롭다운 상자의 내용이 변경될 때 이벤트를 처리할 수 있습니다
9.부모 메소드는 노드의 부모 노드를 얻을 수 있습니다
10. next 메소드는 노드의 다음 형제 노드를 얻을 수 있고, 해당 이전 메소드는 노드의 이전 형제 노드를 얻을 수 있습니다
11. $.post 메소드는 서버와의 비동기 게시 요청을 시작할 수 있습니다. 첫 번째 매개변수는 요청의 서버측 주소, 두 번째 매개변수는 서버로 전송되는 데이터, 매개변수는 이름-값 쌍으로 표현되는 자바스크립트 객체, 세 번째 매개변수는 콜백 메소드, 네 번째 매개변수는 서버를 나타냅니다. 결국 반환된 데이터 유형인 JQuery는 이 매개변수에 따라 변환하는 데 도움을 줍니다. get 메소드는 두 번째 매개변수만 다르고 다른 매개변수의 사용법은 동일합니다
12.Javascript의 간단한 객체 정의 방법은 {key1: value1, key2: value2}
13. JSON의 데이터 형식은 실제로 {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은 완전히 투명함을 의미합니다. 1은 완전히 표시됨을 의미하고 0은 투명함을 의미합니다. JQuery는 애니메이션 메서드에서 브라우저 차이를 차단하며 불투명도를 직접 사용하여 페이드인 및 페이드아웃 효과를 얻을 수 있습니다.
20. 데이터 메소드를 사용하여 데이터를 캐시할 수 있습니다. 캐싱을 통해 시스템 운영 효율성을 높이고 서버의 부하를 줄일 수 있습니다
21. Javascript의 Image 개체를 사용하여 이미지를 미리 로드하면 이미지가 로드되는 시기를 알 수 있고 이미지 로드에 대한 몇 가지 프롬프트 정보를 제공할 수 있습니다.
22. 로드 메소드는 Javascript의 onload 이벤트에 해당할 수 있습니다. 이 예에서는 이미지가 로드되는 이벤트를 캡처하는 데 사용됩니다.

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.