interface Web
js tutoriel
Méthode de liaison par liste déroulante jQuery jsp pour obtenir des données locales (code source joint)_jquery
Méthode de liaison par liste déroulante jQuery jsp pour obtenir des données locales (code source joint)_jquery
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="/static/imghw/default1.png" data-src="images/data-loading.gif" class="lazy" 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="/static/imghw/default1.png" data-src="images/pfeil.gif" class="lazy" alt="有数据" /> </span> <span class="cartype"> 汽车类型: <select></select> <img src="/static/imghw/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/imghw/default1.png" data-src="images/img-loading.gif" alt="图片装载中" /></p> <p><img class="carimg lazy" src="/static/imghw/default1.png" data-src="images/BMW_316ti_rha.jpg" alt="汽车图片"/></p> </div> </body> </html>
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;
}
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);
});
})
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();
}
}
Fichier de configuration web.xml
<?xml version="1.0" encoding="UTF-8"?> <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 값을 모두 자동으로 설정합니다. 약어는 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 이벤트에 해당할 수 있습니다. 이 예에서는 이미지가 로드되는 이벤트를 캡처하는 데 사용됩니다.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Explication détaillée des méthodes de référence jQuery : guide de démarrage rapide
Feb 27, 2024 pm 06:45 PM
Explication détaillée de la méthode de référence jQuery : Guide de démarrage rapide jQuery est une bibliothèque JavaScript populaire largement utilisée dans le développement de sites Web. Elle simplifie la programmation JavaScript et fournit aux développeurs des fonctions et fonctionnalités riches. Cet article présentera en détail la méthode de référence de jQuery et fournira des exemples de code spécifiques pour aider les lecteurs à démarrer rapidement. Présentation de jQuery Tout d'abord, nous devons introduire la bibliothèque jQuery dans le fichier HTML. Il peut être introduit via un lien CDN ou téléchargé
Comment supprimer l'attribut height d'un élément avec jQuery ?
Feb 28, 2024 am 08:39 AM
Comment supprimer l'attribut height d'un élément avec jQuery ? Dans le développement front-end, nous rencontrons souvent le besoin de manipuler les attributs de hauteur des éléments. Parfois, nous pouvons avoir besoin de modifier dynamiquement la hauteur d'un élément, et parfois nous devons supprimer l'attribut height d'un élément. Cet article explique comment utiliser jQuery pour supprimer l'attribut height d'un élément et fournit des exemples de code spécifiques. Avant d'utiliser jQuery pour exploiter l'attribut height, nous devons d'abord comprendre l'attribut height en CSS. L'attribut height est utilisé pour définir la hauteur d'un élément
Comment utiliser la méthode de requête PUT dans jQuery ?
Feb 28, 2024 pm 03:12 PM
Comment utiliser la méthode de requête PUT dans jQuery ? Dans jQuery, la méthode d'envoi d'une requête PUT est similaire à l'envoi d'autres types de requêtes, mais vous devez faire attention à certains détails et paramètres. Les requêtes PUT sont généralement utilisées pour mettre à jour des ressources, comme la mise à jour de données dans une base de données ou la mise à jour de fichiers sur le serveur. Ce qui suit est un exemple de code spécifique utilisant la méthode de requête PUT dans jQuery. Tout d'abord, assurez-vous d'inclure le fichier de la bibliothèque jQuery, puis vous pourrez envoyer une requête PUT via : $.ajax({u
Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page
Feb 28, 2024 pm 09:06 PM
Titre : jQuery Astuces : Modifier rapidement le texte de toutes les balises a de la page En développement web, nous avons souvent besoin de modifier et d'exploiter des éléments de la page. Lorsque vous utilisez jQuery, vous devez parfois modifier le contenu textuel de toutes les balises de la page en même temps, ce qui peut économiser du temps et de l'énergie. Ce qui suit explique comment utiliser jQuery pour modifier rapidement le texte de toutes les balises a de la page et donne des exemples de code spécifiques. Tout d'abord, nous devons introduire le fichier de la bibliothèque jQuery et nous assurer que le code suivant est introduit dans la page : <
Utilisez jQuery pour modifier le contenu textuel de toutes les balises
Feb 28, 2024 pm 05:42 PM
Titre : utilisez jQuery pour modifier le contenu textuel de toutes les balises. jQuery est une bibliothèque JavaScript populaire largement utilisée pour gérer les opérations DOM. En développement web, nous rencontrons souvent le besoin de modifier le contenu textuel de la balise de lien (une balise) sur la page. Cet article expliquera comment utiliser jQuery pour atteindre cet objectif et fournira des exemples de code spécifiques. Tout d’abord, nous devons introduire la bibliothèque jQuery dans la page. Ajoutez le code suivant dans le fichier HTML :
Comment implémenter la fonction de pagination jsp
Mar 04, 2024 pm 04:40 PM
Étapes de mise en œuvre : 1. Introduire la bibliothèque de balises JSTL dans la page JSP ; 2. Obtenir les données de la base de données ; 3. Paginer les données 4. Afficher la barre de navigation de pagination dans la page ; numéro et chaque page, récupérez simplement les données correspondantes des données de pagination et affichez-les sur la page.
Comment savoir si un élément jQuery possède un attribut spécifique ?
Feb 29, 2024 am 09:03 AM
Comment savoir si un élément jQuery possède un attribut spécifique ? Lorsque vous utilisez jQuery pour exploiter des éléments DOM, vous rencontrez souvent des situations dans lesquelles vous devez déterminer si un élément possède un attribut spécifique. Dans ce cas, nous pouvons facilement implémenter cette fonction à l'aide des méthodes fournies par jQuery. Ce qui suit présentera deux méthodes couramment utilisées pour déterminer si un élément jQuery possède des attributs spécifiques et joindra des exemples de code spécifiques. Méthode 1 : utilisez la méthode attr() et l'opérateur typeof // pour déterminer si l'élément a un attribut spécifique
JSP peut-il être remplacé par PHP ?
Mar 21, 2024 am 11:03 AM
JSP peut-il être remplacé par PHP ? JSP (JavaServerPages) et PHP (HypertextPreprocessor) sont des langages de script côté serveur couramment utilisés pour générer dynamiquement le contenu de pages Web. Bien qu’ils aient chacun leurs propres caractéristiques et avantages, peuvent-ils se remplacer complètement dans les applications pratiques ? Cet article analysera les avantages et les inconvénients des deux et les comparera à travers des exemples de code spécifiques. Voyons d’abord les caractéristiques respectives de JSP et PHP. JSP est basé sur Java
