Comment implémenter la fonction de demande d'informations de saisie en ajax-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-03-30 17:31:06

original

1409 Les gens l'ont consulté

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>

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

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!