搜索功能demo

最新推荐文章于 2024-05-27 20:46:13 发布

Shirley_0513

最新推荐文章于 2024-05-27 20:46:13 发布

阅读量194

点赞数

分类专栏：前端文章标签： php ajax

本文链接：https://blog.csdn.net/Shirley_0513/article/details/106923362

版权

前端专栏收录该内容

53 篇文章 0 订阅

订阅专栏

<body>    
    <div>
        <input type="text">
        <button>search</button>
    </div>
    <ul></ul>

    <script>
        
        var input = document.querySelector("input");
        var btn = document.querySelector("button");
        var ul = document.querySelector("ul");
        btn.onclick = function(){
            var value = input.value.trim();
            if(!value){
                alert('不能为空');
            }
            var xhr = new XMLHttpRequest();
            xhr.onload = function(){
                if(xhr.status == 200){    
                    var res = JSON.parse(xhr.responseText);
                    if( res.status == 0 ){
                    var tmp = res.data.map(function(v,i){
                        return `
                                <li>
                                    <h3>${v.className}</h3>
                                    <p>${v.classInfo}</p>
                                    <p>${v.classTime}</p>
                                </li>
                        `;
                    }).join('');
                    ul.innerHTML = tmp;
                }
                else{
                    ul.innerHTML = '查无数据';
                }
                }
            }
            xhr.open('GET','search.php?searchWord='+value,true);
            xhr.send(null);
        }       
    </script>
</body>

<?php

@$con = mysqli_connect('localhost','root','','shirleytest');
header('content-type:text/html;charset=utf-8');
mysqli_query($con,'set names utf8');

$searchWord = $_GET['searchWord'];

$sql = "select * from course where className like '%{$searchWord}%'";
$query = mysqli_query($con,$sql);

if($query && mysqli_num_rows($query) ){
    
    while($row = mysqli_fetch_assoc($query)){
        $arr[] = $row;
    }
    // // echo json_encode($arr);
    echo '{"status":0,"msg":"ok" , "data" :  '.json_encode($arr).'}';
}else{
    echo   '{"status": -1 , "msg":"error" , "data" :  []   }';
}

?>

Shirley_0513

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
搜索功能demo

<body> <div> <input type="text"> <button>search</button> </div> <ul></ul> <script> var input = document.querySelector("input"); var btn = do
复制链接

扫一扫