某度搜索效果制作

来源：互联网发布：共轭亚油酸知乎编辑：程序博客网时间：2024/05/24 06:36

前台页面

<body>

<input type="text" name="username" onblur="shou()"/>
<input type="submit" value="提交" />
<div id="sel"></div>
<script src="jquery-3.2.1.js"></script>
<script>
   function shou()
   {
       var user = $(":input").val();
       $.ajax({

url:'accept.php',

data:'user='+user,

dataType:"json",

type:'POST',

success:function(msg)
{

var html='';

$(msg).each(function(k,v) {

html+="<div>"+v.sname+"</div>";

});

$("#sel").html(html);

               }
           });
       }
</script>

</body>

后台接收页面

<?php
$dsn = "mysql:host=127.0.0.1;dbname=education";
$db = new PDO($dsn, 'root', 'root');
$db->query("set names utf8");
$user=$_POST['user'];
$sql="select * from student where sname like '$user%'";
$res=$db->query("$sql");
$data=$res->fetchAll();
echo json_encode($data);

发送数据json格式和前台的格式需要对应

阅读全文

0 0