通过“玩转javascript”课程中李强老师的视频，代码主要是来自视频中，有些自己做了一些修改，因为输出有些不同

个人介绍：自己小白，以前只有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我是自己做的一个简单的。发送给截图给大家参考。

给出几个搜索截图：