Detaillierte Erläuterung der Ajax-Implementierung des Beispiels für den Eingabeaufforderungseffekt-PHP-Tutorial-php.cn

Detaillierte Erläuterung der Ajax-Implementierung des Beispiels für den Eingabeaufforderungseffekt

小云云

Freigeben： 2023-03-18 10:22:01

Original

1413 Leute haben es durchsucht

js kann den Eingabeaufforderungseffekt realisieren, und Ajax kann dies auch im Detail tun. Interessierte Freunde können sich darauf beziehen Ich hoffe, es kann allen helfen.

Homepage der Website

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

Nach dem Login kopieren

Verarbeitungsseite

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

Nach dem Login kopieren

Verwandte Empfehlungen:

jquery Simulieren Sie den Titel-Eingabeaufforderungseffekt

Praktischer JS-Formularüberprüfungs-Eingabeaufforderungseffekt_Formular-Spezialeffekte

Erzielen Sie einen wunderschönen dynamischen Informationsaufforderungseffekt basierend auf jquery_jquery

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Ajax-Implementierung des Beispiels für den Eingabeaufforderungseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!