Heim > Artikel > Backend-Entwicklung > Detaillierte Erläuterung der Ajax-Implementierung des Beispiels für den Eingabeaufforderungseffekt

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

小云云Original: 2017-12-25 09:30:181387Durchsuche

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>

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

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie die QR-Code-Erkennung beim Teilen von PHP-BeispielenNächster Artikel：So implementieren Sie die QR-Code-Erkennung beim Teilen von PHP-Beispielen

In Verbindung stehende Artikel

Mehr sehen