AJAX+php实现模糊查询（代码），一般用于搜索功能

功能描述：

• 用户在输入框中输入关键字；
• 点击“查询”按钮，查询出含有该关键字的数据；（此案例关键字限制规则是：%keyword%，即数据中含有关键字就符合）
• 数据在ul中渲染在页面

小知识点：

• json_encode() 是php的一个内置函数(php > 5.2)可以使用，把数组转换成json字符串 

• eval() 是全局对象的一个函数属性

• eval() 函数会将传入的字符串当做 JavaScript 代码进行执行。 

网站链接：

• php:https://www.php.net/manual/zh/function.json-encode.php 
• MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval

 .html

<input type="text"><button>搜索</button>
    <!-- 显示搜索出来的内容-->
<ul></ul>

<script>
        //获取操作对象
        var inp=document.querySelector("input")
        var btn=document.querySelector("button")
        var ul=document.querySelector("ul")
        //给按钮绑定点击事件
        btn.onclick=function(){
            //获取输入框中的value值
            var val=inp.value
            //创建ajax对象
            var xhr=new XMLHttpRequest()
            //配置请求信息  携参请求  参数传送到09.php页面
            xhr.open('get','./09.php?keyword='+val)
            //发送请求
            xhr.send()
            //监听ajax状态
            xhr.onreadystatechange=function(){
                //判断ajax状态是否结束
                if(xhr.readyState==4){
                    //判断http请求是否成功
                    if(xhr.status==200){
                        //dt：是一个左右俩边有括号[]的字符串,从后台09.php中传送过来的
                        var dt=xhr.responseText
                        //将字符串dt转为数组对象
                        //eval() 是全局对象的一个函数属性
                        //eval() 函数会将传入的字符串当做 JavaScript 代码进行执行。
                        var arr=eval('('+dt+')')
                        //arr：是一个数组对象，如[{商品1信息},{商品2信息},{商品3信息}])
                        //创建字符串，拼接所有内容
                        var s1=''
                        //遍历数组中所有数据，把数组中的每一个对象遍历出来
                        arr.forEach(item=>{
                            // item.name1：表示只需要各个对象的名字显示出来即可
                            s1+=`
                                <li>${item.name1}</li>
                            `
                        })
                        //把拼接好的内容，渲染到ul中
                        ul.innerHTML=s1
                    }
                }
            }
        }
    </script>

.php

<?php
header("content-type:text/html;charset=utf-8");
//获取传入的参数（从09.ajax9.html传送过来的keyword）
$k=$_GET['keyword'];
//连接数据库
$link=mysqli_connect("localhost","root",'',"shop2");
//给连接好的数据库设置编码
mysqli_set_charset($link,"utf8");
//编写SQL语句
$sql="select * from bbb where name1 like '%$k%'";
//执行SQL语句  只要该数据表中有搜索关键字的数据都会被抽取出来放到result中
$result=mysqli_query($link,$sql);
//创建存放所有数据的数组（模糊查询搜索出来的几乎是很多条数据）
$ar1=[];
//遍历结果集中每条数据  遍历：执行一次，出来一条数据
while($row=mysqli_fetch_assoc($result)){
    //row:临时存放符合条件的数据
    //将遍历出来的数据添加到数组ar1中
    array_push($ar1,$row);
}
//返回响应结果
// json_encode() 内置函数(php > 5.2)可以使用，把数组转换成json字符串
echo json_encode($ar1);
//关闭数据库连接
mysqli_close($link);

?>