interface Web
js tutoriel
Servlet+Ajax implémente la fonction d'invite intelligente de la zone de recherche intelligente
Servlet+Ajax implémente la fonction d'invite intelligente de la zone de recherche intelligente
Cet article présente principalement Servlet+Ajax pour réaliser la fonction d'invite intelligente du champ de recherche intelligent. Les amis intéressés par ajax peuvent se référer à Servlet+Ajax pour implémenter la fonction d'invite intelligente du champ de recherche intelligent
<.>Utiliser la technologie sans rafraîchissement pour intelligemment L'invite de modification du champ de recherche est la même que celle du rendu de recherche Baidu
Le principe de base :
1. Écrivez les événements de liaison js pour le champ de recherche onkeyup (lors de la saisie au clavier) et onfocus (effacez l'invite lorsque la souris clique en dehors du champ de recherche) 2. entrée de l'utilisateur, puis transmet les données obtenues au serveur. Le serveur transmet les données au backend, et le backend obtient les données du serveur pour les traiter, obtient les données associées et renvoie le format json au front-end. end analyse le json renvoyé en texte via la fonction de rappel et transmet le texte à l'affichage sous la zone de rechercheCe qui suit est le package jar qui prend en charge json<.>
search.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ajax搜索</title>
<script type="text/javascript">
//获得更多关联信息的函数
function getMore(){
var xmlHttp;
//首先获得用户的输入
var content = document.getElementById("keyword");
if(content.value==""){
keywordBlur();//执行一下清空方法，使搜索框在无数据的时候，下方残留数据也动态清空
return;
}
//alert(content.value);
//要给服务器发送用户输入的内容，要创建对象,叫XmlHttp对象
//xmlHttp=获得XmlHttp对象
xmlHttp=CreatXMLHttp();
//alert(xmlHttp);
//要给服务器发送数据
var url="serch?keyword="+escape(content.value);
//如果不用escape这个函数转化一下的话，传中文会有问题
//true表示javascript的脚本会在send()方法之后继续执行，而不会等待来自服务器的相应
xmlHttp.open("GET",url,true);
//xmlHttp绑定一个回调方法去接受服务器传来的相应,会在xmlHttp状态改变的时候被调用
//xmlHttp有0~4的状态，只关心4的方法
//4为complete状态，表示交互完成，当交互完成时才会调用回调方法
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);//send里面发送的是内容体，但参数在URL里已经都写完了
//回调函数==!!注意 这里回调方法要在方法内创建，因为创建的xmlHttp对象不是全局变量
//是在getMore()方法里创建的，可以将变量提取出来，变成全局变量
function callback(){
if (xmlHttp.readyState==4){
//200代表服务器相应成功。。。404代表资源未找到。。500服务器内部错误
if(xmlHttp.status==200){
//交互成功，获得相应的数据，是文本格式
var result=xmlHttp.responseText;
//解析json格式
var json=eval("("+result+")");//要在两边加个小括号，js才能认识
//获得数据之后就可以开始展示了。在输入框的下边展示
setContent(json);
}
}
}
//设置关联数据展示,参数代表的是服务器传递过来的关联数据
function setContent(contents){
//setLocation();//设置跟输入框一样宽度
keywordBlur();//在每次得到值之前先清空一下之前的残留数据
var size=contents.length;//根据关联的数据长度，来生成多少<tr>
//设置内容
for(var i=0;i<size;i++){
//不用appendChild()方法是因为不同浏览器可能不兼容该方法
var nextNode=contents[i];//代表json格式的第i个元素
var newRow=content_table_body.insertRow();//创建行
var newCell=newRow.insertCell();//创建单元格
newCell.innerHTML=contents[i];//将数据赋值给单元格
}
}
}
//获得XmlHttp对象
function CreatXMLHttp(){
//要考虑不同浏览器的写法
//大多数浏览器使用
var xmlHttpReq;
if(window.XMLHttpRequest){//火狐
xmlHttpReq=new XMLHttpRequest();
}else{
/* if(window.ActiveXObject){
xmlHttpReq=neww ActiveXObject("Microsoft.XMLHTTP");
//例如ie有很多版本，不一定能创建出来这个对象，所以要添加以下一个判断
//换一种方法，保证创建
if(!xmlHttp){
xmlHttpReq=new ActiveObject("Msxml2.XMLHTTP");
}
} */
//一定要如下格式写 上述格式火狐IE亲测不好使
try { //IE
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
try {//IE 浏览器
xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
}
}
}
return xmlHttpReq;
}
//失去焦点的时候
function keywordBlur(){
//要获得body的元素长度，才能知道要遍历多少次
var contentTableBody=document.getElementById("content_table_body");
var size=contentTableBody.childNodes.length;
//因为是删除子节点，所以是从后往前才能删，同二叉树，删除子节点
for(var i=size-1;i>=0;i--){
contentTableBody.removeChild(contentTableBody.childNodes[i]);
}
document.getElementById("popp").style.border="none";
}
</script>
<style type="text/css">
/* #myp{
position: absolute;
left:30%;
top:50%;
margin-left: 100px;
} */
.mouseOver{
background: #708090;
color: #FFFAFA;
}
.mouseOut{
background: #FFFAFA;
color: #000000;
}
</style>
</head>
<body>
<p id="myp">
<!-- 输入框 -->
<input type="text" id="keyword" size="50" onblur="keywordBlur()" onkeyup="getMore()" onfocus="getMore()"/>
<input type="button" value="百度一下" wise="50px">
<!-- 下面是内容展示的区域 -->
<p id="popp">
<table id="contentTable" bgcolor="#FFFAFA" border="0" cellpadding="0" cellspacing="0">
<tbody id="content_table_body">
<!-- 这个是动态查询出来的数据显示的地方 -->
<!-- <tr><td>ajax1</td></tr>
<tr><td>ajax2</td></tr>
<tr><td>ajax3</td></tr> -->
</tbody>
</table>
</p>
</p>
</body>
</html>
SearchServlet.class
package com.ninka;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
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 SearchServlet extends HttpServlet{
static List<String> datas = new ArrayList<String>();
static{
datas.add("ajax1");
datas.add("ajax2");
datas.add("ajax3");
datas.add("bichi1");
datas.add("bichi2");
datas.add("php");
datas.add("javascript");
datas.add("java");
datas.add("html");
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置下编码格式
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
System.out.println("123");
//首先获得客户端传来的数据,,注意传过来的参数关键字一定要写对，否则会空指针异常
String keyword = request.getParameter("keyword");
//获得关键字之后进行处理，得到关联数据
List<String> listData = getData(keyword);
//返回json格式
System.out.println(JSONArray.fromObject(listData));
//JSONArray.fromObject(listData);
response.getWriter().write(JSONArray.fromObject(listData).toString());
}
//获得关联数据方法
public List<String> getData(String keyword){
List<String> list = new ArrayList<String>();
for(String data:datas){
//如果传递过来的数据，属于词库里面的话，那么就把包含关键词的数据打包成list，向客户端传
if(data.contains(keyword)){
list.add(data);
}
}
return list;
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1"> <display-name>ajaxtest</display-name> <welcome-file-list> <welcome-file>search.jsp</welcome-file> </welcome-file-list> <servlet> <!-- 为什么要用search？因为在js中定义url的时候写的是search --> <servlet-name>search</servlet-name> <servlet-class>com.ninka.SearchServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>search</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> </web-app>
Ce qui précède est le servlet +Implémentation Ajax de la fonction d'invite intelligente du champ de recherche intelligente introduite par l'éditeur. J'espère qu'elle sera utile à tout le monde ! !
Recommandations associées :
Explication détaillée du principe de la requête inter-domaines Ajax avec des exemplesExplication détaillée d'Ajax et du nœud. js multer pour implémenter la fonction de téléchargement de fichiersÀ propos de la méthode d'implémentation de l'effet d'attente de chargement avant qu'Ajax ne renvoie les donnéesCe qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
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
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
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)
Sujets chauds
Comment rechercher des utilisateurs à Xianyu
Feb 24, 2024 am 11:25 AM
Comment Xianyu recherche-t-il des utilisateurs ? Dans le logiciel Xianyu, nous pouvons trouver directement les utilisateurs avec lesquels nous souhaitons communiquer dans le logiciel. Mais je ne sais pas comment rechercher des utilisateurs. Visualisez-le simplement parmi les utilisateurs après la recherche. Vient ensuite l'introduction que l'éditeur propose aux utilisateurs sur la façon de rechercher des utilisateurs. Si vous êtes intéressé, venez jeter un œil ! Comment rechercher des utilisateurs dans Xianyu ? Réponse : Afficher les détails parmi les utilisateurs recherchés Introduction : 1. Entrez le logiciel et cliquez sur la zone de recherche. 2. Entrez le nom d'utilisateur et cliquez sur Rechercher. 3. Sélectionnez ensuite [Utilisateur] sous la zone de recherche pour trouver l'utilisateur correspondant.
Comment utiliser la recherche avancée Baidu
Feb 22, 2024 am 11:09 AM
Comment utiliser la recherche avancée Baidu Le moteur de recherche Baidu est actuellement l'un des moteurs de recherche les plus utilisés en Chine. Il offre une multitude de fonctions de recherche, dont la recherche avancée. La recherche avancée peut aider les utilisateurs à rechercher les informations dont ils ont besoin avec plus de précision et à améliorer l'efficacité de la recherche. Alors, comment utiliser la recherche avancée Baidu ? La première étape consiste à ouvrir la page d’accueil du moteur de recherche Baidu. Tout d’abord, nous devons ouvrir le site officiel de Baidu, qui est www.baidu.com. C'est l'entrée de la recherche Baidu. Dans la deuxième étape, cliquez sur le bouton Recherche avancée. Sur le côté droit du champ de recherche Baidu, il y a
Comment mettre en œuvre la double connexion WeChat sur les téléphones mobiles Huawei ?
Mar 24, 2024 am 11:27 AM
Comment mettre en œuvre la double connexion WeChat sur les téléphones mobiles Huawei ? Avec l’essor des réseaux sociaux, WeChat est devenu l’un des outils de communication indispensables dans la vie quotidienne des gens. Cependant, de nombreuses personnes peuvent rencontrer un problème : se connecter à plusieurs comptes WeChat en même temps sur le même téléphone mobile. Pour les utilisateurs de téléphones mobiles Huawei, il n'est pas difficile d'obtenir une double connexion WeChat. Cet article explique comment obtenir une double connexion WeChat sur les téléphones mobiles Huawei. Tout d'abord, le système EMUI fourni avec les téléphones mobiles Huawei offre une fonction très pratique : l'ouverture d'une double application. Grâce à la fonction de double ouverture de l'application, les utilisateurs peuvent simultanément
Guide de programmation PHP : méthodes pour implémenter la séquence de Fibonacci
Mar 20, 2024 pm 04:54 PM
Le langage de programmation PHP est un outil puissant pour le développement Web, capable de prendre en charge une variété de logiques et d'algorithmes de programmation différents. Parmi eux, l’implémentation de la séquence de Fibonacci est un problème de programmation courant et classique. Dans cet article, nous présenterons comment utiliser le langage de programmation PHP pour implémenter la séquence de Fibonacci et joindrons des exemples de code spécifiques. La suite de Fibonacci est une suite mathématique définie comme suit : le premier et le deuxième élément de la suite valent 1, et à partir du troisième élément, la valeur de chaque élément est égale à la somme des deux éléments précédents. Les premiers éléments de la séquence
La table WPS ne trouve pas les données que vous recherchez, veuillez vérifier l'emplacement de l'option de recherche
Mar 19, 2024 pm 10:13 PM
À l'ère dominée par l'intelligence, les logiciels de bureautique sont également devenus populaires et les formulaires Wps sont adoptés par la majorité des employés de bureau en raison de leur flexibilité. Au travail, nous devons non seulement apprendre à créer des formulaires simples et à saisir du texte, mais également à maîtriser des compétences plus opérationnelles afin d'accomplir les tâches du travail réel. Les rapports contenant des données et l'utilisation de formulaires sont plus pratiques, clairs et précis. La leçon que nous vous apportons aujourd'hui est la suivante : la table WPS ne trouve pas les données que vous recherchez. Pourquoi veuillez vérifier l'emplacement de l'option de recherche ? 1. Sélectionnez d'abord le tableau Excel et double-cliquez pour l'ouvrir. Ensuite dans cette interface, sélectionnez toutes les cellules. 2. Ensuite, dans cette interface, cliquez sur l'option « Modifier » dans « Fichier » dans la barre d'outils supérieure. 3. Deuxièmement, dans cette interface, cliquez sur «
Comment rechercher des magasins sur mobile Taobao Comment rechercher des noms de magasins
Mar 13, 2024 am 11:00 AM
Le logiciel de l'application mobile Taobao propose de nombreux bons produits. Vous pouvez les acheter à tout moment et n'importe où, et tout est authentique. Il n'y a aucune opération compliquée, ce qui vous permet de faire des achats plus pratiques. Vous pouvez rechercher et acheter librement à votre guise. Les sections de produits des différentes catégories sont toutes ouvertes. Ajoutez votre adresse de livraison personnelle et votre numéro de contact pour permettre à l'entreprise de messagerie de vous contacter, et vérifiez les dernières tendances logistiques en temps réel. les utilisateurs l'utilisent pour la première fois. Si vous ne savez pas comment rechercher des produits, il vous suffit bien sûr de saisir des mots-clés dans la barre de recherche pour trouver tous les résultats des produits. Vous ne pouvez pas arrêter d'acheter librement. L'éditeur fournira des méthodes en ligne détaillées permettant aux utilisateurs mobiles de Taobao de rechercher des noms de magasins. 1. Ouvrez d'abord l'application Taobao sur votre téléphone mobile,
Comment implémenter la fonction de clonage WeChat sur les téléphones mobiles Huawei
Mar 24, 2024 pm 06:03 PM
Comment mettre en œuvre la fonction de clonage WeChat sur les téléphones mobiles Huawei Avec la popularité des logiciels sociaux et l'importance croissante accordée à la confidentialité et à la sécurité, la fonction de clonage WeChat est progressivement devenue le centre d'attention. La fonction de clonage WeChat peut aider les utilisateurs à se connecter simultanément à plusieurs comptes WeChat sur le même téléphone mobile, ce qui facilite la gestion et l'utilisation. Il n'est pas difficile de mettre en œuvre la fonction de clonage WeChat sur les téléphones mobiles Huawei. Il vous suffit de suivre les étapes suivantes. Étape 1 : Assurez-vous que la version du système de téléphonie mobile et la version de WeChat répondent aux exigences. Tout d'abord, assurez-vous que la version de votre système de téléphonie mobile Huawei a été mise à jour vers la dernière version, ainsi que l'application WeChat.
Découvrez comment Golang offre des possibilités de développement de jeux
Mar 16, 2024 pm 12:57 PM
Dans le domaine actuel du développement logiciel, Golang (langage Go), en tant que langage de programmation efficace, concis et hautement simultané, est de plus en plus favorisé par les développeurs. Sa riche bibliothèque de normes et ses fonctionnalités de concurrence efficaces en font un choix de premier plan dans le domaine du développement de jeux. Cet article explorera comment utiliser Golang pour le développement de jeux et démontrera ses puissantes possibilités à travers des exemples de code spécifiques. 1. Avantages de Golang dans le développement de jeux. En tant que langage typé statiquement, Golang est utilisé dans la construction de systèmes de jeux à grande échelle.
