写一个基于Ajax的数据查询界面代码
时间: 2024-03-23 11:36:19 浏览: 61
好的,下面是一个基于 Ajax 的数据查询界面的示例代码:
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Ajax 数据查询界面</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#search-form').submit(function(e) {
e.preventDefault();
var searchValue = $('#search-input').val();
$.ajax({
type: 'POST',
url: 'search.php',
data: {
search: searchValue
},
success: function(response) {
$('#search-results').html(response);
},
error: function() {
alert('查询失败,请稍后再试!');
}
});
});
});
</script>
</head>
<body>
<h1>Ajax 数据查询界面</h1>
<form method="post" id="search-form">
<label for="search-input">输入查询内容:</label>
<input type="text" name="search" id="search-input">
<button type="submit">查询</button>
</form>
<div id="search-results"></div>
</body>
</html>
```
上面的 HTML 代码中,我们使用了 jQuery 库来简化 Ajax 的调用。在页面加载完成后,我们绑定了表单的 submit 事件。当用户提交表单时,我们获取输入框的值,使用 Ajax 发送 POST 请求到 search.php 文件,并将查询内容作为 POST 参数传递。如果查询成功,我们将查询结果显示在页面上。
PHP 代码(search.php):
```
<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("连接失败:" . $conn->connect_error);
}
// 查询数据
$search = $_POST['search'];
$sql = "SELECT * FROM table WHERE column LIKE '%$search%'";
$result = $conn->query($sql);
// 显示结果
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<p>" . $row["column"] . "</p>";
}
} else {
echo "没有查询到结果。";
}
// 关闭数据库连接
$conn->close();
?>
```
上面的 PHP 代码中,我们首先连接到数据库,使用 $_POST 获取查询内容,然后使用 LIKE 运算符查询符合条件的数据。最后,我们将查询结果作为 HTML 标签返回给前端页面。
注意:上面的代码仅为示例代码,请根据自己的实际情况进行修改。同时,为了安全起见,应该对查询内容进行安全过滤和验证,以防止 SQL 注入等攻击。
阅读全文