Contoh dalam artikel ini menerangkan kaedah memaut kotak lungsur jQuery jsp untuk mendapatkan data setempat. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:
Pautan kotak lungsur JQuery mencerminkan keperluan Ajax untuk pemerolehan data atas permintaan dan mengurangkan jumlah interaksi data. (Klik di sini untuk memuat turun kod sumber )
Contoh berikut menggunakan Json untuk menukar kelas atau objek sebelah pelayan ke dalam format JSON, terutamanya menggunakan 6 pakej balang
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
Gambar percubaan dilampirkan di bawah, dan kod utama diterangkan secara terperinci
Paparkan halaman 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 kaedah pautan kotak drop-down untuk mendapatkan data setempat (kod sumber dilampirkan)_jquery" /></p> <p>jQuery jsp kaedah pautan kotak drop-down untuk mendapatkan data setempat (kod sumber dilampirkan)_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>
Ubah suai fail 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;
}
Di sini, perhatikan perbezaan antara paparan atribut: tiada; dan keterlihatan: tersembunyi; paparan: tiada;
Selepas menggunakan atribut ini, lebar, tinggi dan nilai atribut lain bagi elemen HTML (objek) akan "hilang";
keterlihatan: tersembunyi;
Selepas menggunakan atribut ini, elemen HTML (objek) hanya tidak dapat dilihat secara visual (sepenuhnya telus), tetapi kedudukan spatial yang didudukinya masih wujud, iaitu, ia masih mempunyai nilai atribut seperti ketinggian dan lebar.
JQUERY memproses fail 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 kaedah pautan kotak drop-down untuk mendapatkan data setempat (kod sumber dilampirkan)_jquery的节点定义ajax事件，实现动画提示效果
$(".loading").ajaxStart(function(){
$(this).css("visibility","visible");
$(this).animate({
opacity: 1
},0);
}).ajaxStop(function(){
$(this).animate({
opacity: 0
},500);
});
})
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();
}
}
JQuery et autres connaissances en développement apprises dans cette section :
1. L'attribut alt de la balise img doit être écrit Lorsque l'image n'a pas été chargée ou que l'image n'existe pas, les informations textuelles de cet attribut seront affichées
.
2.select représente une liste déroulante. Chaque élément de la liste déroulante est une option. Le contenu des balises de début et de fin de l'option sera affiché sur la page. au serveur en utilisant la méthode val dans JQuery de. Lorsque la valeur de l'attribut sélectionné est définie comme sélectionnée, cela signifie que l'option actuelle est sélectionnée
3. Comment afficher l'élément div au centre : définissez la largeur du div, puis les valeurs de margin-left et margin-right sont toutes deux automatiques. L'abréviation est margin : 0 auto ;
4. La balise p du html représente le contenu d'un paragraphe. Le contenu occupera une ou plusieurs lignes, et le contenu suivant sera affiché sur une autre ligne
.
5. Afin de centrer le texte et les images dans p, vous pouvez utiliser l'attribut text-align et la valeur de l'attribut est center. La balise p a des valeurs margin-top et margin-bottom par défaut, qui peuvent être effacées via CSS si nécessaire
6. Lorsque la valeur de l'attribut de visibilité est masquée, l'élément est masqué, mais contrairement à display, qui n'en est aucun, il occupe toujours un certain espace sur la page, mais
n'est pas affiché.
7. Si plusieurs sélecteurs ont la même valeur d'attribut, ils peuvent être définis ensemble et séparés par des virgules
8. La méthode change correspond à l'événement onchange en Javascript standard et peut gérer les événements lorsque le contenu de la liste déroulante change
9.La méthode parent peut obtenir le nœud parent d'un nœud
10. La méthode suivante peut obtenir le nœud frère suivant d'un nœud, et la méthode précédente correspondante peut obtenir le nœud frère précédent d'un nœud
11. La méthode $.post peut lancer une demande de publication asynchrone avec le serveur. Le premier paramètre est l'adresse côté serveur de la requête, le deuxième paramètre est les données envoyées au serveur, le paramètre est un objet Javascript, exprimé sous la forme de paires nom-valeur, le troisième paramètre est la méthode de rappel et le quatrième paramètre indique le serveur. Le type de données renvoyé à la fin, JQuery nous aidera à convertir en fonction de ce paramètre. La méthode get ne diffère que par le deuxième paramètre, et les autres paramètres ont le même usage
12.La méthode simple de définition d'objet en Javascript est {key1 : value1, key2 : value2}
13. Le format de données JSON est en fait le contenu au format texte défini par un objet ou des données en Javascript, tel que {key1 : value1, key2 : [1,2,3]} ou [1,2,{key2 :
valeur2}]
14. Vous pouvez utiliser directement la méthode $("") pour créer les options dans la liste déroulante, puis utiliser la méthode appendTo pour les ajouter à la liste déroulante
15. La méthode attr peut définir ou obtenir la valeur d'attribut d'un nœud
16.ajaxStart est exécuté avant le démarrage de chaque requête ajax émise par JQuery, ajaxStop est exécuté une fois que toutes les requêtes ajax de la file d'attente JQuery sont terminées et ajaxComplete est exécuté une fois que chaque requête ajax émise par JQuery est terminée
17. fadeOut et fadeIn peuvent obtenir l'effet de fondu sortant et de fondu entrant. Le contenu des paramètres est similaire aux méthodes slideUp et slideDown.
18. La méthode d'animation peut obtenir n'importe quel effet d'animation et contrôler qu'un certain attribut CSS soit modifié dans un certain laps de temps pour obtenir l'effet d'animation
19.L'opacité peut modifier la transparence des éléments. Dans IE, un filtre est utilisé pour l'implémenter. 100 signifie entièrement affiché et 0 signifie complètement transparent. Les navigateurs non IE utilisent l'attribut d'opacité et 0 signifie transparent. JQuery bloque les différences du navigateur dans la méthode d'animation et vous pouvez utiliser l'opacité directement pour obtenir l'effet de fondu d'entrée et de sortie.
20. La méthode des données peut être utilisée pour mettre les données en cache. La mise en cache peut améliorer l'efficacité opérationnelle du système et réduire la charge sur le serveur
21. Vous pouvez utiliser l'objet Image en Javascript pour précharger des images, afin de savoir quand l'image est chargée, afin de pouvoir donner des informations rapides pour le chargement de l'image.
22. La méthode load peut correspondre à l'événement onload en Javascript. Dans cet exemple, elle est utilisée pour capturer l'événement de chargement de l'image
J'espère que cet article sera utile à tous ceux qui programment jQuery.
Bagaimana untuk melaksanakan fungsi paging jsp
Apakah pemalam jquery?
Bagaimana untuk membuka jsp
Bagaimana untuk membuka format jsp
Bagaimana untuk mengendalikan json dengan jquery
Cara menggunakan perisian pengaturcaraan jsp
Bagaimana untuk mengkonfigurasi ruang maya jsp
Bagaimana untuk memadam elemen dalam jquery
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
