Maison développement back-end tutoriel php Explication détaillée de l'implémentation ajax de l'exemple d'effet d'invite de saisie

Explication détaillée de l'implémentation ajax de l'exemple d'effet d'invite de saisie

Dec 25, 2017 am 09:30 AM
ajax 提示 输入

js peut réaliser l'effet d'invite de saisie de page, et ajax peut également le faire. Cet article présente principalement en détail la méthode d'ajax pour réaliser l'effet d'invite de saisie. Il a une certaine valeur de référence. j'espère que cela peut aider tout le monde.

Page d'accueil du site Web

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin:0px auto;
      padding:0px;
    }
    .l{
      height:50px;
      width:198px;
      border-bottom:1px solid black;
      text-align: center;
      line-height:40px;
      vertical-align: middle;
    }
  </style>
  <script src="../wenjian/jquery-2.2.3.min.js"></script>
</head>
<body>
<p style="height: 50px;width: 200px"><input type="text" id="name" style="width: 198px;height: 48px;"></p>
<p id="list" style="height: 500px;width: 200px;border: 1px solid black">
<!--<p id="l">zhongguo</p>-->
</p>

</body>
</html>
<script>
$("#name").keyup(function () {
  var n = $("#name").val();
  if (n != ""){
  $.ajax({
    url:&#39;ltchuli.php&#39;,
    data:{n:n},
    type:&#39;post&#39;,
//    dataType:&#39;text&#39;,
    dataType:&#39;json&#39;,
    success:function (data) {
//text写法
//     var s = data.split("|");
//     var str = "";
//     for (var i=0;i<s.length;i++)
//     {
//       str = str + "<p class=&#39;l&#39;>" +s[i] +"</p>";
//     }
//     $("#list").html(str);
//json写法

      for (var i in data){
        $("#list").append("<p class=&#39;l&#39;>" +data[i] +"</p>");
      }
    }
  });
}else {
    $("#list").html("");
  }
})
</script>
Copier après la connexion

Page de traitement


<?php
/**
 * Created by fcc
 * User: Administrator
 * Date: 2017/10/30
 * Time: 9:52
 */
$n = $_POST[&#39;n&#39;];
require_once "../wenjian/DBDA.class.php";
$db = new DBDA();
$obj = "select region_name from region WHERE region_name LIKE &#39;%{$n}%&#39; ";
$data = $db->Query($obj);
//echo $data;
echo json_encode($data);
Copier après la connexion

Recommandations associées :

jquery Simuler l'effet d'invite de titre

Invite de vérification de formulaire JS pratique effect_Form effets spéciaux

Obtenez un bel effet d'invite d'informations dynamique basé sur jquery_jquery

Ce 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!

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

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

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)

Que dois-je faire si Google Chrome indique que le contenu de cet onglet est partagé ? Que dois-je faire si Google Chrome indique que le contenu de cet onglet est partagé ? Mar 13, 2024 pm 05:00 PM

Que dois-je faire si Google Chrome indique que le contenu de cet onglet est partagé ? Lorsque nous utilisons Google Chrome pour ouvrir un nouvel onglet, nous rencontrons parfois une invite indiquant que le contenu de cet onglet est partagé. Alors, que se passe-t-il ? Laissez ce site fournir aux utilisateurs une introduction détaillée au problème de Google Chrome, invitant à partager le contenu de cet onglet. Google Chrome indique que le contenu de cet onglet est en cours de partage. Solution : 1. Ouvrez Google Chrome. Vous pouvez voir trois points dans le coin supérieur droit du navigateur « Personnaliser et contrôler Google Chrome ». l'icône. 2. Après avoir cliqué, la fenêtre de menu de Google Chrome apparaîtra ci-dessous et la souris se déplacera vers « Plus d'outils ».

L'entrée Windows rencontre un blocage ou une utilisation élevée de la mémoire [Réparer] L'entrée Windows rencontre un blocage ou une utilisation élevée de la mémoire [Réparer] Feb 19, 2024 pm 10:48 PM

L'expérience de saisie Windows est un service système clé chargé de traiter les entrées utilisateur provenant de divers périphériques d'interface humaine. Il démarre automatiquement au démarrage du système et s'exécute en arrière-plan. Cependant, ce service peut parfois se bloquer automatiquement ou occuper trop de mémoire, ce qui entraîne une réduction des performances du système. Il est donc crucial de surveiller et de gérer ce processus en temps opportun pour garantir l’efficacité et la stabilité du système. Dans cet article, nous expliquerons comment résoudre les problèmes de blocage de l'expérience de saisie Windows ou entraînant une utilisation élevée de la mémoire. Le service Windows Input Experience n'a pas d'interface utilisateur, mais il est étroitement lié à la gestion des tâches système de base et des fonctions liées aux périphériques d'entrée. Son rôle est d'aider le système Windows à comprendre chaque entrée saisie par l'utilisateur.

Comment résoudre l'erreur 403 rencontrée par la requête jQuery AJAX Comment résoudre l'erreur 403 rencontrée par la requête jQuery AJAX Feb 20, 2024 am 10:07 AM

Titre : Méthodes et exemples de code pour résoudre les erreurs 403 dans les requêtes jQuery AJAX L'erreur 403 fait référence à une demande selon laquelle le serveur interdit l'accès à une ressource. Cette erreur se produit généralement parce que la demande manque d'autorisations ou est rejetée par le serveur. Lorsque vous effectuez des requêtes jQueryAJAX, vous rencontrez parfois cette situation. Cet article explique comment résoudre ce problème et fournit des exemples de code. Solution : Vérifiez les autorisations : assurez-vous d'abord que l'adresse URL demandée est correcte et vérifiez que vous disposez des autorisations suffisantes pour accéder à la ressource.

Comment résoudre l'erreur 403 de la requête jQuery AJAX Comment résoudre l'erreur 403 de la requête jQuery AJAX Feb 19, 2024 pm 05:55 PM

jQuery est une bibliothèque JavaScript populaire utilisée pour simplifier le développement côté client. AJAX est une technologie qui envoie des requêtes asynchrones et interagit avec le serveur sans recharger la page Web entière. Cependant, lorsque vous utilisez jQuery pour effectuer des requêtes AJAX, vous rencontrez parfois des erreurs 403. Les erreurs 403 sont généralement des erreurs d'accès refusé par le serveur, probablement en raison de problèmes de politique de sécurité ou d'autorisation. Dans cet article, nous verrons comment résoudre la requête jQueryAJAX rencontrant une erreur 403.

Comment obtenir des variables de la méthode PHP en utilisant Ajax ? Comment obtenir des variables de la méthode PHP en utilisant Ajax ? Mar 09, 2024 pm 05:36 PM

L'utilisation d'Ajax pour obtenir des variables à partir de méthodes PHP est un scénario courant dans le développement Web. Grâce à Ajax, la page peut être obtenue dynamiquement sans actualiser les données. Dans cet article, nous présenterons comment utiliser Ajax pour obtenir des variables à partir de méthodes PHP et fournirons des exemples de code spécifiques. Tout d’abord, nous devons écrire un fichier PHP pour gérer la requête Ajax et renvoyer les variables requises. Voici un exemple de code pour un simple fichier PHP getData.php :

L'application Baidu Tieba indique que l'opération est trop fréquente, quel est le problème ? L'application Baidu Tieba indique que l'opération est trop fréquente, quel est le problème ? Apr 01, 2024 pm 05:06 PM

L'application Baidu Tieba indique que l'opération est trop fréquente. Cette invite vise généralement à maintenir le fonctionnement normal de la plate-forme et l'expérience utilisateur, à empêcher le spam d'écran malveillant, le spam publicitaire et d'autres comportements inappropriés. Pour les méthodes de traitement spécifiques, vous pouvez lire le didacticiel. partagé par l'éditeur. L'application Baidu Tieba indique que l'opération est trop fréquente. Partager comment y faire face 1. Lorsque le système affiche [L'opération est trop fréquente], nous devons attendre un moment. Si vous êtes anxieux, vous pouvez d'abord faire autre chose. Généralement, après avoir attendu un moment, ce message d'invite disparaîtra automatiquement et nous pourrons l'utiliser normalement. 2. Si après une longue attente, l'écran affiche toujours [Opération trop fréquente], nous pouvons essayer d'aller au Tieba Emergency Bar, au Tieba Feedback Bar et à d'autres Tieba officiels, poster pour signaler ce phénomène et demander au personnel officiel de le résoudre. 3.

Comment résoudre le problème de l'erreur 403 jQuery AJAX ? Comment résoudre le problème de l'erreur 403 jQuery AJAX ? Feb 23, 2024 pm 04:27 PM

Comment résoudre le problème de l’erreur 403 jQueryAJAX ? Lors du développement d'applications Web, jQuery est souvent utilisé pour envoyer des requêtes asynchrones. Cependant, vous pouvez parfois rencontrer le code d'erreur 403 lors de l'utilisation de jQueryAJAX, indiquant que l'accès est interdit par le serveur. Cela est généralement dû aux paramètres de sécurité côté serveur, mais il existe des moyens de résoudre le problème. Cet article explique comment résoudre le problème de l'erreur 403 jQueryAJAX et fournit des exemples de code spécifiques. 1. faire

PHP et Ajax : créer un moteur de suggestions de saisie semi-automatique PHP et Ajax : créer un moteur de suggestions de saisie semi-automatique Jun 02, 2024 pm 08:39 PM

Créez un moteur de suggestions de saisie semi-automatique en utilisant PHP et Ajax : Script côté serveur : gère les requêtes Ajax et renvoie des suggestions (autocomplete.php). Script client : envoyer une requête Ajax et afficher des suggestions (autocomplete.js). Cas pratique : Incluez le script dans la page HTML et spécifiez l'identifiant de l'élément d'entrée de recherche.

See all articles