suchen

Heim >Web-Frontend >js-Tutorial >jQuery-JSP-Dropdown-Box-Verknüpfungsmethode zum Abrufen lokaler Daten (Quellcode angehängt)_jquery

jQuery-JSP-Dropdown-Box-Verknüpfungsmethode zum Abrufen lokaler Daten (Quellcode angehängt)_jquery

WBOY
WBOYOriginal
2016-05-16 15:27:471823Durchsuche

Das Beispiel in diesem Artikel beschreibt die Methode zum Verknüpfen des jQuery-JSP-Dropdown-Felds, um lokale Daten abzurufen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Die JQuery-Dropdown-Box-Verknüpfung spiegelt die Anforderungen von Ajax für die bedarfsgesteuerte Datenerfassung gut wider und reduziert die Menge der Dateninteraktion. (Klicken Sie hier , um den Quellcode herunterzuladen )

Das folgende Beispiel verwendet Json, um serverseitige Klassen oder Objekte in das JSON-Format zu konvertieren, hauptsächlich unter Verwendung von 6 JAR-Paketen

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

Das experimentelle Bild ist unten beigefügt und der Hauptcode wird ausführlich erklärt

Seite index.jsp anzeigen

<%@ 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-Dropdown-Box-Verknüpfungsmethode zum Abrufen lokaler Daten (Quellcode angehängt)_jquery" /></p>
  <p>jQuery-JSP-Dropdown-Box-Verknüpfungsmethode zum Abrufen lokaler Daten (Quellcode angehängt)_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>

Ändern Sie die Datei 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;
}

Hier achten Sie auf den Unterschied zwischen den Attributen „Anzeige: keine“ und „Sichtbarkeit: ausgeblendet“; Anzeige: keine;

Nach der Verwendung dieses Attributs gehen die Breite, Höhe und andere Attributwerte des HTML-Elements (Objekts) „verloren“;

Sichtbarkeit: ausgeblendet;

Nach Verwendung dieses Attributs ist das HTML-Element (Objekt) nur noch optisch unsichtbar (vollständig transparent), die räumliche Position, die es einnimmt, ist jedoch weiterhin vorhanden, dh es verfügt weiterhin über Attributwerte wie Höhe und Breite.

JQUERY verarbeitet die Datei 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-Dropdown-Box-Verknüpfungsmethode zum Abrufen lokaler Daten (Quellcode angehängt)_jquery的节点定义ajax事件，实现动画提示效果
 $(".loading").ajaxStart(function(){
 $(this).css("visibility","visible");
 $(this).animate({
  opacity: 1
 },0);
 }).ajaxStop(function(){
 $(this).animate({
  opacity: 0
 },500);
 });
})
Frage? ? ? :$("").appendTo(cartypeSelect);Wie löst man hier die verstümmelten chinesischen Zeichen? ? ?

Serverseitiges 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();
 }
}
Konfigurationsdatei web.xml

JQuery dan pengetahuan pembangunan lain yang dipelajari dalam bahagian ini:

1. Atribut alt teg img harus ditulis Apabila imej belum dimuatkan atau imej tidak wujud, maklumat teks atribut ini akan dipaparkan
2.select mewakili kotak drop-down Setiap item dalam kotak drop-down adalah pilihan Kandungan dalam teg permulaan dan akhir akan dipaparkan pada halaman Nilai atribut nilai digunakan untuk mendapatkan dan menghantar ke pelayan menggunakan kaedah val dalam JQuery of. Apabila nilai atribut yang dipilih ditakrifkan sebagai dipilih, ini bermakna pilihan semasa dipilih
3. Bagaimana untuk memaparkan elemen div di tengah: tetapkan lebar div, dan kemudian nilai margin-kiri dan margin-kanan kedua-duanya adalah automatik. Singkatan ialah margin: 0 auto;
4. Teg p html mewakili kandungan perenggan Kandungan akan menduduki satu atau lebih baris, dan kandungan berikut akan dipaparkan pada baris lain
5. Untuk memusatkan teks dan gambar dalam p, anda boleh menggunakan atribut penjajaran teks, dan nilai atribut ialah tengah. Teg p mempunyai nilai margin atas dan margin bawah secara lalai, yang boleh dikosongkan melalui css jika perlu
6. Apabila nilai atribut keterlihatan disembunyikan, elemen disembunyikan, tetapi tidak seperti paparan, yang tiada, ia masih menempati ruang tertentu pada halaman, tetapi
tidak dipaparkan. 7. Jika berbilang pemilih mempunyai nilai atribut yang sama, ia boleh ditakrifkan bersama dan dipisahkan dengan koma
8. Kaedah perubahan sepadan dengan acara onchange dalam Javascript standard dan boleh mengendalikan acara apabila kandungan kotak lungsur berubah
9. Kaedah induk boleh mendapatkan nod induk bagi nod
10. Kaedah seterusnya boleh mendapatkan nod adik beradik seterusnya bagi nod, dan kaedah sebelumnya yang sepadan boleh mendapatkan nod adik beradik sebelumnya bagi nod
11. Kaedah $.post boleh memulakan permintaan siaran tak segerak dengan pelayan. Parameter pertama ialah alamat sisi pelayan permintaan, parameter kedua ialah data yang dihantar ke pelayan, parameter ialah objek Javascript, dinyatakan dalam bentuk pasangan nilai-nama, parameter ketiga ialah kaedah panggil balik, dan parameter keempat menunjukkan pelayan Jenis data yang dikembalikan pada akhir, JQuery akan membantu kami menukar mengikut parameter ini. Kaedah get hanya berbeza dalam parameter kedua, dan parameter lain mempunyai penggunaan yang sama
12. Kaedah takrifan objek mudah dalam Javascript ialah {key1: value1, key2: value2}
13. Format data JSON sebenarnya ialah kandungan format teks yang ditakrifkan oleh objek atau data dalam Javascript, seperti {key1: value1, key2: [1,2,3]} atau [1,2,{key2:
nilai2}]
14. Anda boleh terus menggunakan kaedah $("") untuk mencipta pilihan dalam kotak drop-down, dan kemudian gunakan kaedah appendTo untuk menambahkannya pada kotak drop-down
15. Kaedah attr boleh menetapkan atau mendapatkan nilai atribut nod
16.ajaxStart dilaksanakan sebelum setiap permintaan ajax yang dikeluarkan oleh JQuery bermula, ajaxStop dilaksanakan selepas semua permintaan ajax dalam baris gilir JQuery selesai, dan ajaxComplete dilaksanakan selepas setiap permintaan ajax yang dikeluarkan oleh JQuery selesai
17. fadeOut dan fadeIn boleh mencapai kesan fade out dan fade in. Kandungan parameter adalah serupa dengan kaedah slideUp dan slideDown.
18. Kaedah animasi boleh mencapai sebarang kesan animasi dan boleh mengawal atribut css tertentu untuk berubah dalam tempoh masa tertentu untuk mencapai kesan animasi
19. Kelegapan boleh mengubah ketelusan elemen Dalam IE, penapis digunakan untuk melaksanakannya dan 0 bermaksud telus sepenuhnya. JQuery menyekat perbezaan pelayar dalam kaedah bernyawa, dan anda boleh menggunakan kelegapan terus untuk mencapai kesan fade-in dan fade-out.
20. Kaedah data boleh digunakan untuk cache data. Caching boleh meningkatkan kecekapan pengendalian sistem dan mengurangkan beban pada pelayan
21. Anda boleh menggunakan objek Imej dalam Javascript untuk pramuat imej, supaya anda boleh tahu bila imej dimuatkan, supaya anda boleh memberikan beberapa maklumat segera untuk memuatkan imej.
22. Kaedah pemuatan boleh sepadan dengan acara onload dalam Javascript Dalam contoh ini, ia digunakan untuk menangkap peristiwa yang imej dimuatkan

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So legen Sie JS-Effekte für Vorher- und Nachher-Pseudoelemente fest. Javascript-FähigkeitenNächster Artikel：So legen Sie JS-Effekte für Vorher- und Nachher-Pseudoelemente fest. Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen