话不多说,直接切入重点。
经过多次实践,我大体总结出了一个应用模板。主要有两个文件:前端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" onkeyup="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标签中显示。
本文知识给出了简单模板,具体就靠各位大佬发挥了!