这次给大家带来ajax怎么实现提示输入信息的功能,ajax实现提示输入信息功能的注意事项有哪些,下面就是实战案例,一起来看一下。
本文实例为大家分享了ajax实现输入提示效果的具体代码,供大家参考,具体内容如下
网站主页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <!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: 'json' ,
success: function (data) {
for ( var i in data){
$( "#list" ).append( "<p class='l'>" +data[i] + "</p>" );
}
}
});
} else {
$( "#list" ).html( "" );
}
})
</script>
|
Salin selepas log masuk
处理页面
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?php
$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 json_encode( $data );
|
Salin selepas log masuk
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
实现无刷新下拉联动的Ajax+Servlet(附代码)
怎样用Ajax异步检查用户名有无重复
Atas ialah kandungan terperinci ajax怎么实现提示输入信息的功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!