AJAX 实时搜索学习笔记
什么是 AJAX
AJAX（Asynchronous JavaScript and XML）是一种创建快速动态网页的技术，它在不重新加载整个页面的情况下，实现了对部分页面的更新。通过 AJAX 技术，可以实现异步通信，从而大幅度提高页面响应速度和用户体验。
AJAX 实时搜索实例
下面是一个简单的 AJAX 实时搜索实例，它使用了 jQuery 和 PHP。
HTML 代码
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>AJAX 实时搜索</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="js/search.js"></script>
</head>
<body>
<h1>AJAX 实时搜索</h1>
<input type="text" id="keywords" placeholder="请输入关键词">
<ul id="result"></ul>
</body>
</html>
jQuery 代码
javascriptCopy Code$(function(){
$('#keywords').keyup(function(){
var keywords = $(this).val();
$.ajax({
url: 'search.php',
type: 'post',
dataType: 'json',
data: {'keywords': keywords},
success: function(data){
var html = '';
if(data.length > 0){
for(var i=0; i<data.length; i++){
html += '<li>'+data[i]+'</li>';
}
}else{
html += '<li>没有找到相关结果</li>';
}
$('#result').html(html);
}
});
});
});
PHP 代码
phpCopy Code<?php
$keywords = $_POST['keywords'];
$data = array();
if($keywords){
$conn = mysqli_connect('localhost', 'root', 'password', 'test');
mysqli_query($conn, "set names 'utf8'");
$sql = "select * from `books` where `name` like '%".$keywords."%'";
$result = mysqli_query($conn, $sql);
while($row = mysqli_fetch_assoc($result)){
$data[] = $row['name'];
}
mysqli_close($conn);
}
echo json_encode($data);
?>
备注
以上实例仅供参考，具体实现方式和效果因环境和需求而异。建议在实际开发过程中，结合自身业务进行调整和优化。