仿百度搜索推举
后台PHP模糊查找获取数据：
final class getData{
private $v = null;
private $link;
public function __construct(){
$this->getParams();
$this->connect();
$this->query();
}
private function connect(){
$this->link = mysqli_connect('localhost','root','root');
mysqli_select_db($this->link,'itcast');
mysqli_set_charset($this->link,'utf8');
}
private function getParams(){
$this->v = $_GET['v'];
}
private function query(){
//SQL 语句
$sql = "select * from student where name like '".$this->v."%'";
$res = mysqli_query($this->link,$sql);
$data = [];
while($row = mysqli_fetch_assoc($res)){
$data[] = $row;
}
echo json_encode($data);
}
}
new getData();前台请求遍历数据：
<body>
<input type="text" id="key"><br>
<div id="result"></div>
</body>
<script>
(window.$ = function(id){
return document.getElementById(id);
})();
//oninput 元素的值发生改变时触发。
$('key').oninput = function(){
//该事件仅支持<input>、<textarea> 元素
var v = this.value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
var msg = JSON.parse(xhr.responseText);
$('result').innerHTML = '';
for(var i = 0; i<msg.length; i++){
$('result').innerHTML += '<div>' + msg[i].name + '</div>';
}
}
}
xhr.open('get','082101.php?v=' + v);
xhr.send();
}
</script>