Explication détaillée de l'implémentation ajax de l'exemple d'effet d'invite de saisie-tutoriel php-php.cn

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

小云云

Libérer： 2023-03-18 10:22:01

original

1386 Les gens l'ont consulté

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!