Maison développement back-end tutoriel php PHP 和 AJAX Live Search

PHP 和 AJAX Live Search

Jun 23, 2016 pm 02:34 PM

AJAX 可为用户提供更友好、交互性更强的搜索体验。

AJAX Live Search

在下面的 AJAX 例子中,我们将演示一个实时的搜索。

实时的搜索与传统搜索相比,具有很多优势:

当键入数据时,就会显示出匹配的结果 当继续键入数据时,对结果进行过滤 如果结果太少,删除字符就可以获得更宽的范围

在下面的文本框中搜索 W3School 的页面

本例包括四个元素:

简单的 HTML 表单 JavaScript PHP 页面 XML 文档

在本例中,结果在一个 XML 文档 (links.xml) 中进行查找。为了让这个例子小而简单,我们只提供 8 个结果。

HTML 表单

这是 HTML 页面。它包含一个简单的 HTML 表单,针对此表单的 CSS 样式,以及指向 JavaScript 的链接:

<html><head><script src="livesearch.js"></script> <style type="text/css"> #livesearch  {   margin:0px;  width:194px;   }#txt1  {   margin:0px;  } </style></head><body><form><input type="text" id="txt1" size="30"onkeyup="showResult(this.value)"><div id="livesearch"></div></form></body></html>
Copier après la connexion
例子解释 - HTML 表单

正如你看到的,HTML 页面包含一个简单的 HTML 表单,其中的文本框名为 "txt1"。

表单是这样工作的:

当用户在文本框中按键并松开按键时,会触发一个事件 当事件触发时,会执行名为 showResult() 的函数 表单下面是名为 "livesearch" 的
元素。它用作 showResult() 所返回数据的占位符

JavaScript

JavaScript 代码存储在与 HTML 文档连接的 "livesearch.js" 中:

var xmlHttpfunction showResult(str){if (str.length==0) {  document.getElementById("livesearch"). innerHTML=""; document.getElementById("livesearch"). style.border="0px"; return }xmlHttp=GetXmlHttpObject()if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return }var url="livesearch.php"url=url+"?q="+strurl=url+"&sid="+Math.random()xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true)xmlHttp.send(null)} function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {  document.getElementById("livesearch"). innerHTML=xmlHttp.responseText; document.getElementById("livesearch"). style.border="1px solid #A5ACB2"; } }function GetXmlHttpObject(){var xmlHttp=null;try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch (e) { // Internet Explorer try  {  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");  } catch (e)  {  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  } }return xmlHttp;}
Copier après la connexion
例子解释:

GetXmlHttpObject 与 PHP 和 AJAX 请求 中的例子相同。

showResult() 函数

该函数每当一个字符输入文本框就会执行一次。

如果文本域中没有输入 (str.length == 0),该函数把返回字段设置为空,并删除周围的任何边框。

不过,如果文本域中存在输入,则函数执行:

定义发送到服务器的 url (文件名) 把带有输入框内容的参数 (q) 添加到 url 添加一个随机数,以防止服务器使用缓存文件 调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象,并在触发一个变化时告知此函数执行名为 stateChanged 的一个函数 使用给定的 url 来打开 XMLHTTP 对象 向服务器发送 HTTP 请求 stateChanged() 函数

每当 XMLHTTP 对象的状态发生变化时,该函数就会执行。

当状态变为 4 (或 "complete") 时,就会使用响应文本来填充 txtHint 占位符的内容,并在返回字段周围设置一个边框。

PHP 页面

由 JavaScript 代码调用的服务器页面是名为 "livesearch.php" 的 PHP 文件。

"livesearch.php" 中的代码检查那个 XML 文档 "links.xml"。该文档 w3school.com.cn 上的一些页面的标题和 URL。

这些代码会搜索 XML 文件中匹配搜索字符串的标题,并以 HTML 返回结果:

<?php$xmlDoc = new DOMDocument();$xmlDoc->load("links.xml");$x=$xmlDoc->getElementsByTagName('link');//get the q parameter from URL$q=$_GET["q"];//lookup all links from the xml file if length of q>0if (strlen($q) > 0){$hint="";for($i=0; $i<($x->length); $i++) { $y=$x->item($i)->getElementsByTagName('title'); $z=$x->item($i)->getElementsByTagName('url'); if ($y->item(0)->nodeType==1)  {  //find a link matching the search text  if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))   {   if ($hint=="")    {    $hint="<a href='" .     $z->item(0)->childNodes->item(0)->nodeValue .     "' target='_blank'>" .     $y->item(0)->childNodes->item(0)->nodeValue . "</a>";    }   else    {    $hint=$hint . "<br /><a href='" .     $z->item(0)->childNodes->item(0)->nodeValue .     "' target='_blank'>" .     $y->item(0)->childNodes->item(0)->nodeValue . "</a>";    }   }  } }}// Set output to "no suggestion" if no hint were found// or to the correct valuesif ($hint == "") { $response="no suggestion"; }else { $response=$hint; } //output the responseecho $response;?>
Copier après la connexion
例子解释:

如果从 JavaScript 送来了任何文本 (strlen($q) > 0),会发生:

PHP 创建 "links.xml" 文件的一个 XML DOM 对象 遍历所有 "title" 元素 (nodetypes = 1),以便找到匹配 JavaScript 所传数据的 name 找到包含正确 title 的 link,并设置为 "$response" 变量。如果找到多于一个匹配,所有的匹配都会添加到变量 如果没有找到匹配,则把 $response 变量设置为 "no suggestion" $result 是送往 "livesearch" 占位符的输出
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

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

<🎜>: Dead Rails - Comment apprivoiser les loups
4 Il y a quelques semaines By DDD
Niveaux de force pour chaque ennemi et monstre de R.E.P.O.
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
<🎜>: Grow A Garden - Guide de mutation complet
2 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Tutoriel Java
1662
14
Tutoriel PHP
1261
29
Tutoriel C#
1234
24
Expliquez différents types d'erreur dans PHP (avis, avertissement, erreur mortelle, erreur d'analyse). Expliquez différents types d'erreur dans PHP (avis, avertissement, erreur mortelle, erreur d'analyse). Apr 08, 2025 am 12:03 AM

Il existe quatre principaux types d'erreur dans PHP: 1.Notice: Le moins, n'interrompra pas le programme, comme l'accès aux variables non définies; 2. AVERTISSEMENT: grave que d'avis, ne résiliera pas le programme, comme ne contenant aucun fichier; 3. FatalError: le plus grave, finira le programme, comme appeler aucune fonction; 4. PARSEERROR: ERREUR SYNTAXE, EVERA ENCORE LE PROGRAMME EST EXECULTÉ, comme oublier d'ajouter la balise de fin.

PHP et Python: comparaison de deux langages de programmation populaires PHP et Python: comparaison de deux langages de programmation populaires Apr 14, 2025 am 12:13 AM

PHP et Python ont chacun leurs propres avantages et choisissent en fonction des exigences du projet. 1.Php convient au développement Web, en particulier pour le développement rapide et la maintenance des sites Web. 2. Python convient à la science des données, à l'apprentissage automatique et à l'intelligence artificielle, avec syntaxe concise et adaptée aux débutants.

Expliquez le hachage de mot de passe sécurisé dans PHP (par exemple, Password_Hash, Password_verify). Pourquoi ne pas utiliser MD5 ou SHA1? Expliquez le hachage de mot de passe sécurisé dans PHP (par exemple, Password_Hash, Password_verify). Pourquoi ne pas utiliser MD5 ou SHA1? Apr 17, 2025 am 12:06 AM

Dans PHP, Password_Hash et Password_verify Les fonctions doivent être utilisées pour implémenter le hachage de mot de passe sécurisé, et MD5 ou SHA1 ne doit pas être utilisé. 1) Password_hash génère un hachage contenant des valeurs de sel pour améliorer la sécurité. 2) Password_verify Vérifiez le mot de passe et assurez-vous la sécurité en comparant les valeurs de hachage. 3) MD5 et SHA1 sont vulnérables et manquent de valeurs de sel, et ne conviennent pas à la sécurité de mot de passe moderne.

PHP en action: Exemples et applications du monde réel PHP en action: Exemples et applications du monde réel Apr 14, 2025 am 12:19 AM

PHP est largement utilisé dans le commerce électronique, les systèmes de gestion de contenu et le développement d'API. 1) E-commerce: Utilisé pour la fonction de panier et le traitement des paiements. 2) Système de gestion du contenu: utilisé pour la génération de contenu dynamique et la gestion des utilisateurs. 3) Développement des API: Utilisé pour le développement de l'API RESTful et la sécurité de l'API. Grâce à l'optimisation des performances et aux meilleures pratiques, l'efficacité et la maintenabilité des applications PHP sont améliorées.

Quelles sont les méthodes de demande HTTP (obtenir, publier, mettre, supprimer, etc.) et quand chacune devrait être utilisée? Quelles sont les méthodes de demande HTTP (obtenir, publier, mettre, supprimer, etc.) et quand chacune devrait être utilisée? Apr 09, 2025 am 12:09 AM

Les méthodes de demande HTTP incluent GET, Publier, Put and Delete, qui sont utilisées pour obtenir, soumettre, mettre à jour et supprimer respectivement les ressources respectivement. 1. La méthode GET est utilisée pour obtenir des ressources et convient aux opérations de lecture. 2. La méthode post-post est utilisée pour soumettre des données et est souvent utilisée pour créer de nouvelles ressources. 3. La méthode de put est utilisée pour mettre à jour les ressources et convient aux mises à jour complètes. 4. La méthode de suppression est utilisée pour supprimer les ressources et convient aux opérations de suppression.

PHP: un langage clé pour le développement Web PHP: un langage clé pour le développement Web Apr 13, 2025 am 12:08 AM

PHP est un langage de script largement utilisé du côté du serveur, particulièrement adapté au développement Web. 1.Php peut intégrer HTML, traiter les demandes et réponses HTTP et prend en charge une variété de bases de données. 2.PHP est utilisé pour générer du contenu Web dynamique, des données de formulaire de traitement, des bases de données d'accès, etc., avec un support communautaire solide et des ressources open source. 3. PHP est une langue interprétée, et le processus d'exécution comprend l'analyse lexicale, l'analyse grammaticale, la compilation et l'exécution. 4.PHP peut être combiné avec MySQL pour les applications avancées telles que les systèmes d'enregistrement des utilisateurs. 5. Lors du débogage de PHP, vous pouvez utiliser des fonctions telles que error_reportting () et var_dump (). 6. Optimiser le code PHP pour utiliser les mécanismes de mise en cache, optimiser les requêtes de base de données et utiliser des fonctions intégrées. 7

Comment PHP gère-t-il les téléchargements de fichiers en toute sécurité? Comment PHP gère-t-il les téléchargements de fichiers en toute sécurité? Apr 10, 2025 am 09:37 AM

PHP gère les téléchargements de fichiers via la variable de fichiers $ \ _. Les méthodes pour garantir la sécurité incluent: 1. Vérifiez les erreurs de téléchargement, 2. Vérifiez le type et la taille du fichier, 3. Empêchez l'écrasement des fichiers, 4. Déplacez les fichiers vers un emplacement de stockage permanent.

Expliquez la différence entre soi ::, parent :: et statique :: dans php oop. Expliquez la différence entre soi ::, parent :: et statique :: dans php oop. Apr 09, 2025 am 12:04 AM

Dans PhPoop, self :: fait référence à la classe actuelle, Parent :: fait référence à la classe parent, static :: est utilisé pour la liaison statique tardive. 1. self :: est utilisé pour la méthode statique et les appels constants, mais ne prend pas en charge la liaison statique tardive. 2.Parent :: est utilisé pour que les sous-classes appellent les méthodes de classe parent, et les méthodes privées ne sont pas accessibles. 3.Static :: prend en charge la liaison statique tardive, adaptée à l'héritage et au polymorphisme, mais peut affecter la lisibilité du code.

See all articles