Maison > Article > interface Web > Comment implémenter la fonction de demande d'informations de saisie en ajax

Comment implémenter la fonction de demande d'informations de saisie en ajax

php中世界最好的语言original: 2018-03-30 17:31:061385parcourir

Cette fois, je vais vous montrer comment implémenter la fonction de demande de saisie d'informations en ajax. Quelles sont les précautions pour implémenter la fonction de demande de saisie d'informations en ajax. Voici un cas pratique. , jetons un coup d'oeil.

L'exemple de cet article partage avec vous le code spécifique d'ajax pour obtenir l'effet d'invite de saisie pour votre référence. Le contenu spécifique est le suivant

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:'ltchuli.php',
    data:{n:n},
    type:'post',
//    dataType:'text',
    dataType:'json',
    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>

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);

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Ajax+Servlet pour implémenter un lien déroulant sans actualisation (avec code)

Comment pour utiliser Ajax de manière asynchrone Vérifiez si le nom d'utilisateur est dupliqué

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：

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

Article précédent：js implémentation de l'obtention d'un exemple de code de vérification SMSArticle suivant：js implémentation de l'obtention d'un exemple de code de vérification SMS

Articles Liés

Voir plus