基于AJAX+PHP实现实时搜索实例

话不多说，直接切入重点。

经过多次实践，我大体总结出了一个应用模板。主要有两个文件：前端index.html和后端livesearch.php组成。

首先是前端，index.html，当然保存成index.php我也没有意见。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>AJAX实时搜索测试</title>
    <script>
    function showResult(){
        var ques = document.getElementsByName("ques")[0].value;
        if (ques.length==0){ 
            document.getElementById("livesearch").innerHTML="";
            document.getElementById("livesearch").style.border="0px";
            return;
        }
        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }else{// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
                document.getElementById("livesearch").style.border="1px solid #A5ACB2";
            }
        }
        xmlhttp.open("GET","./livesearch.php?ques="+ques,true);
        xmlhttp.send();
    }
    </script>
</head>

<body>
    <div id="content">
        <input type="text" name="ques" size="30" οnkeyup="showResult()" />
    </div>
    <div id="livesearch">
    </div>
</body>
</html>

原理简单解释一下。

通过向content中的input输入搜索关键字，input内容被改变触发js脚本中的showReult函数。

showResult首先通过getElementsByName函数取得input中的内容，最终通过xmhttp.open以及xmlhttp.send函数以get形式将参数传递给后端livesearch.php。livesearch.php对参数进行一系列处理后，将搜索结果通过echo返回，显示到前端livesearch的div标签中。

当然还有上面的代码通过js进行了简单的界面优化，比如input中内容为空时不进行搜索，同时把livesearch标签“隐藏”起来，防止后端输出一些稀奇古怪的东西。各位大佬可根据自己的需求简单修改。

接下来就是后端，livesearch.php。

后端就比较灵活了，可以根据自己的需求进行“搜索”，返回结果。在此以mysql数据库搜索为例。

<?php
    $con = mysql_connect('localhost', 'username', 'password');
    mysql_select_db('db_name');
    $ques = mysql_real_escape_string($_GET['ques']);
    $sql = "SELECT * FROM table_name WHERE name like '%".$ques."%'";
    $result = mysql_query($sql);
    while(true){
        $row = mysql_fetch_array($result);
        if(empty($row)) break;
        echo $row['...'];
    }
    mysql_close($con);
?>

通过sql子句"SELECT * FROM 数据表名 WHERE 字段名 like '%关键字%'"在数据库中模糊搜索。

注意GET穿过来的参数用mysql_real_escape_string进行一下简单转义，防止sql注入。

最终echo输出的结果会在livesearch标签中显示。

本文知识给出了简单模板，具体就靠各位大佬发挥了！

Coder.AN

发布了2 篇原创文章 · 获赞 2 · 访问量 7325

私信关注

基于AJAX+PHP实现实时搜索实例

猜你喜欢