要求: 1.编写一个页面,页面中有一个输入框。 2.用户在输入框输入文字,发送ajax请求。 3.服务器接收到请求,根据输入的数据,进行模糊查询 4.服务器把查询的结果返回客户端,客户端显示结果。 服务端表格和数据自己定义
时间: 2023-05-12 13:07:48 浏览: 248
AjaxUpLoad.js实现文件上传功能
非常好的问题!这是一个典型的前后端交互的问题,需要使用前端技术和后端技术来完成。以下是一个简单的实现思路:
1. 前端页面中添加一个输入框和一个按钮,用户在输入框中输入文字后点击按钮。
2. 使用 jQuery 或者原生 JavaScript 发送一个 AJAX 请求,将用户输入的文字发送给后端服务器。
3. 后端服务器接收到请求后,根据输入的数据进行模糊查询,可以使用 SQL 语句或者其他查询方式。
4. 查询结果返回给前端页面,前端页面使用 JavaScript 将查询结果显示在页面上,可以使用表格或者其他方式来展示数据。
以下是一个简单的代码示例:
前端页面代码:
```
<!DOCTYPE html>
<html>
<head>
<title>模糊查询</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="inputText">
<button onclick="search()">查询</button>
<table id="resultTable">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</table>
<script>
function search() {
var inputText = $("#inputText").val();
$.ajax({
url: "search.php",
type: "POST",
data: {inputText: inputText},
success: function(result) {
$("#resultTable").append(result);
}
});
}
</script>
</body>
</html>
```
后端 PHP 代码:
```
<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// 获取用户输入的文字
$inputText = $_POST["inputText"];
// 查询数据库
$sql = "SELECT * FROM myTable WHERE name LIKE '%$inputText%'";
$result = $conn->query($sql);
// 输出查询结果
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<tr><td>" . $row["name"] . "</td><td>" . $row["age"] . "</td><td>" . $row["gender"] . "</td></tr>";
}
} else {
echo "0 结果";
}
$conn->close();
?>
```
这个示例代码只是一个简单的实现思路,实际应用中还需要考虑安全性、性能等问题。
阅读全文