ajax模糊查询实例
时间: 2023-07-27 12:14:39 浏览: 47
好的,下面是一个基于 PHP 和 jQuery 的 AJAX 模糊查询实例:
1. HTML 页面
```html
<!DOCTYPE html>
<html>
<head>
<title>AJAX 模糊查询实例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$('#search-input').keyup(function() {
var keyword = $(this).val();
$.ajax({
type: 'POST',
url: 'search.php',
data: {'keyword': keyword},
dataType: 'json',
success: function(data) {
var html = '';
for (var i = 0; i < data.length; i++) {
html += '<li>' + data[i] + '</li>';
}
$('#search-result').html(html);
}
});
});
});
</script>
</head>
<body>
<input type="text" id="search-input" placeholder="输入关键字">
<ul id="search-result"></ul>
</body>
</html>
```
2. PHP 后端程序
```php
<?php
// 连接数据库
$link = mysqli_connect('localhost', 'root', '123456', 'test');
if (!$link) {
die('连接失败: ' . mysqli_connect_error());
}
// 接收 AJAX 请求
$keyword = isset($_POST['keyword']) ? $_POST['keyword'] : '';
if (empty($keyword)) {
die();
}
// 查询匹配的数据
$sql = "SELECT * FROM `users` WHERE `name` LIKE '%$keyword%' LIMIT 10";
$result = mysqli_query($link, $sql);
if (!$result) {
die('查询失败: ' . mysqli_error($link));
}
// 构造返回的数据
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
$data[] = $row['name'];
}
// 返回 JSON 格式的数据
header('Content-Type: application/json');
echo json_encode($data);
```
在这个实例中,我们使用了 jQuery 的 $.ajax 方法向后端发送数据,后端使用了 mysqli 扩展连接 MySQL 数据库,从 `users` 表中查询匹配的数据,然后将它们返回给前端页面,前端页面解析后端返回的 JSON 数据,并将它们显示在查询结果区域中。