个人介绍:自己小白,以前只有C语言和自己所学的C++基础。看网上老师视频做的。微信:taojunyouyou
第一部分:html代码
</ul> </div> <script src="ajax.js"></script> <script> //对ajax.js的封装测试是可以的; var keyword=document.getElementById('keyword'); var ul=document.getElementById('list'); //绑定事件 onkeydown:对输入有滞后;onkeyup:实时输入;onkeypress: keyword.onkeyup =function(){ //清空ul原来用户输入的值; ul.innerHTML=''; //获取用户输入内容; //console.log(this.value);//this.value就是用户输入的值;或者用keyword.value; var v=keyword.value; //发送ajax请求 $.get('ajax_fengzhuan.php',{keyword:v},function(data){ console.log('gaga'); console.log('data is',data); console.log('haha'); var w=data.indexOf("{"); console.log('w=',w); var res=data.substring(w); console.log(res); console.log(typeof(res)); var fin=eval("(" + res + ")"); console.log('fin=',fin); console.log(typeof(fin)); for(var i=0;i<fin.data.length;i++){ //创建li标签,然后插入到ul中 var li=document.createElement('li'); li.innerHTML=fin.data[i].name; //插入 ul.appendChild(li); } //数据转换 }); } </script> </body> </html> 第二部分:ajax.js封装 var $={ get:function(url,data,func){ var x=new XMLHttpRequest(); x.onreadystatechange=function(){ if(x.readyState==4&&x.status==200){ //处理服务器返回数据 func(x.responseText); } } //{a:100,b:200} =>a=100&b=200; var str=''; for(var i in data){ str+=i+'='+data[i]+'&'; } x.open('GET',url+'?'+str,true); x.send(); }, post:function(url,data,func){ var x=new XMLHttpRequest(); x.onreadystatechange=function(){ if(x.readyState==4&&x.status==200){ //处理服务器返回数据 func(x.responseText); } } //{a:100,b:200} =>a=100&b=200; var str=''; for(var i in data){ str+=i+'='+data[i]+'&'; } //初始化 x.open('POST',url,true); //设置请求头信息 x.setRequestHeader('content-type','application/x-www-form-urlencoded'); x.send(str); } }
第三部分:php代码
<?php $keyword=$_GET["keyword"]; var_dump($keyword); echo 'i am good'; $dsn = "mysql::host=127.0.0.1;dbname=db1"; $pdo=new PDO($dsn,'root','123456');//‘123456'为你的数据库的密码。这个你要设置成自己的。 var_dump($pdo);//主要检查pdo创建是否成功; //预处理操作 $stmt=$pdo->prepare('select name from singer where name like ? limit 8'); //参数绑定 $str=$keyword.'%';//$str='abc%'; $arr=[$str];//$arr=['%']; //执行 $stmt->execute($arr); //获取结果 //$res=$stmt->fetchAll(); $res=$stmt->fetchAll(PDO::FETCH_ASSOC); //var_dump($res);//就是看结果反馈如何; //到此为止就完成了结果获取; //返回数据 //状态标识 $arr=[ 'status'=>0, 'msg'=>'ok', 'data'=>$res ]; echo 'next is output'; echo ""; echo json_encode($arr,JSON_UNESCAPED_UNICODE);//返回结果; ?>
singer.sql我是自己做的一个简单的。发送给截图给大家参考。
给出几个搜索截图: