Maison > Article > développement back-end > Explication détaillée de l'implémentation ajax de l'exemple d'effet d'invite de saisie
Explication détaillée de l'implémentation ajax de l'exemple d'effet d'invite de saisie
- 小云云original
- 2017-12-25 09:30:181349parcourir
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:'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='l'>" +s[i] +"</p>";
// }
// $("#list").html(str);
//json写法
for (var i in data){
$("#list").append("<p class='l'>" +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['n'];
require_once "../wenjian/DBDA.class.php";
$db = new DBDA();
$obj = "select region_name from region WHERE region_name LIKE '%{$n}%' ";
$data = $db->Query($obj);
//echo $data;
echo json_encode($data);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!