ajax实时索搜

最新推荐文章于 2021-09-09 12:12:19 发布

qq_37996815

最新推荐文章于 2021-09-09 12:12:19 发布

阅读量246

点赞数

分类专栏： php

本文链接：https://blog.csdn.net/qq_37996815/article/details/78566127

版权

php 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

今天想着做个demo玩玩，一时想不到要做什么，突然灵光一现，不如做个基于ajax的实时搜索功能，啊啊啊啊，没想到的是我遇到了好多坑，只怪自己学艺不精。
这个demo我们要实现的功能就是你在输入框输入的内容，我可以实时的返回一些结果给你

第一个问题就是你在输入框输入空格的时候我们要屏蔽你这个空格输入，不让他触发ajax。
第二个问题就是我在写原生ajax的时候，我是使用的POST方式进行传输，然而我是在url那边写上了参数，导致php后台一直不能获取我传递过来的参数（发现那个问题的时候才知道自己有多门蠢）。
JSON的数据格式，json的格式就是不管你是key还是value都要加上引号，要不然识别不出，因为JSON是很严格的数据格式。
后台向前台发送的数据如果里面有中文要先进行中文格式的处理，要不然你进过json.encode()之后，数据里面的中文会乱码，处理中文就是用urlencode()这个函数进行处理的，不要忘记输出的时候还要使用一次urldecode()。
输出问题：请使用echo 进行输出，要不然你会莫名的哇很多坑。
代码如下：
前台：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>实时搜索</title>
</head>
<script>


         window.onload=function() {
             var oldStr;
         var test='[{"phone_id":"7","phone_name":"x9s","phone_price":"2799","conpanmy":"vivo"},{"phone_id":"86","phone_name":"phone x","phone_price":"9898","conpanmy":"苹果"}]';
            var input=document.getElementById('input');
            var div=document.getElementById('div');
             input.onkeyup=function() {
                 //清空div的内容  便于下次输入后显示新的内容
                 div.innerHTML='';
                 var str=this.value;
                 //去掉空字符串
                 var  newStr=str.replace(/^(\s*) | (\s*)|(\s*)$/,'');
                  var newLen=newStr.length;
                  //如果前后两个不一样就进入搜索阶段
                  if(oldStr!=newStr){
                                  console.log('old：'+oldStr);
                                  console.log('new：'+newStr);
                                  //进行ajax传输 将要查询的数据存入后台
                                  //判断是否是支持ajax
                                if(window.XMLHttpRequest){
         var xhr=new XMLHttpRequest();
                          }
    else {
       //IE6的ajax请求
  var xhr=new ActiveXObject('Microsoft.XMLHTTP');
                                }


   //打开ajax  通过get请求
                                xhr.open('get','search.php?input='+newStr,true);
      //发送请求
  xhr.send();
      //接受ajax响应
                               xhr.onreadystatechange=function() {
   if(xhr.status==200 && xhr.readyState==4){
       //接受数据
      var data=xhr.responseText;
     if(data=='zero'){


                       }
       else {
          if (typeof data === 'string') {

data = JSON.parse(data);
                                             console.log(data.length);
                                               for(var i=0;i<data.length;i++){
                                                   var li=document.createElement('li');
                                                   li.innerText="型号："+data[i].phone_name;
                                                   div.appendChild(li);
                                               }
                                           }
                                      }
                                  }
                               };

oldStr=newStr;
                  }
                  else {
                      console.log('两个一样');
                  }

             }

         }
</script>
<body>
<form>
  <input type="text" id="input"  placeholder="输入你想搜索的对象">
</form>
<ul id="div" style="margin-top: 50px;"></ul>
</body>

</html>

后台代码：

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2017/11/17
 * Time: 15:07
 */
//及时搜索后台响应


//先判断是不是post请求
 if($_SERVER['REQUEST_METHOD']=='GET'){

     //接受请求的数据
     $input=$_GET['input'];
     $response=[
         'status'=>'success'
     ];

//链接数据库
     $conn=new mysqli('localhost','root','root','cty');
//测试链接

     if($conn->connect_error){
         echo '链接失败';
         die();
     }
//sql语句
     $sql="SELECT * FROM mobile WHERE phone_name LIKE '%$input%'";
//执行sql语句
     $res= $conn->query($sql);
//判断是否查询成功
//声明一个数组存放结果
     $arr=array();
     if($res->num_rows>0){

         //将查询结果放入数组
         while ($row=$res->fetch_assoc()){
             array_push($arr,$row);
         }

         //处理中文
         foreach($arr as $key=>$val){
$arr[$key]['conpanmy']=urlencode($arr[$key]['conpanmy']);
$arr[$key]['phone_name']=urlencode($arr[$key]['phone_name']);
         }
          echo urldecode(json_encode($arr)) ;

     }
     else{
         $arr='zero';
        echo $arr;
     }
 }

qq_37996815

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax实时索搜

今天想着做个demo玩玩，意识想不到要做声明，突然灵光一现，不如做个基于ajax的实时搜索功能，啊啊啊啊，没想到的是我遇到了好多坑，只怪自己学院不精。这个demo我们要实现的功能就是你在输入框输入的内容，我可以实时的返回一些结果给你第一个问题就是你在输入框输入空格的时候我们要屏蔽你这个空格输入，不让他触发ajax。第二个问题就是我在写原生ajax的时候，我是使用的POST方式进行传输，
复制链接

扫一扫