php ajax实现查询数据库

本文将介绍如何使用PHP和AJAX来查询数据库。通过使用AJAX技术,我们可以在不刷新整个页面的情况下,实时地从数据库中获取数据并将其显示在网页上。

假设我们有一个学生信息管理系统,其中有一个学生列表页面。我们想要在用户在搜索框中输入学生的姓名后,实时从数据库中查询匹配的学生,并将结果显示给用户。

首先,我们需要一个包含学生姓名等信息的MySQL数据库。以student表为例,其中有id、name、age等字段。我们的目标是通过AJAX技术实现通过姓名查询学生的功能。

<?php
// 连接数据库
$conn = mysqli_connect("localhost", "root", "password", "database");
// 获取用户输入的姓名
$searchName = $_POST['search_name'];
// 查询数据库,获取匹配的学生数据
$sql = "SELECT * FROM student WHERE name LIKE '%$searchName%' ";
$result = mysqli_query($conn, $sql);
// 循环获取每个匹配的学生记录,并输出
while($row = mysqli_fetch_assoc($result)) {
echo "ID: " . $row['id'] . "<br>";
echo "Name: " . $row['name'] . "<br>";
echo "Age: " . $row['age'] . "<br><br>";
}
// 关闭数据库连接
mysqli_close($conn);
?>

上述代码的作用是,首先连接到数据库。然后获取用户在搜索框中输入的姓名。接下来,查询数据库中与用户输入的姓名匹配的学生记录,并循环输出每个匹配的学生记录的id、姓名和年龄信息。最后,关闭数据库连接。

接下来,我们需要在网页上的搜索框中实现实时查询的功能。这可以通过使用AJAX来实现。当用户在搜索框中输入姓名时,AJAX会将用户输入的姓名发送到服务器,并获取从数据库返回的匹配的学生数据,然后将其显示在网页上。

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
function searchStudent() {
let searchName = document.getElementById('search_name').value;
axios.post('search_student.php', {
search_name: searchName
})
.then(function (response) {
document.getElementById('results').innerHTML = response.data;
})
.catch(function (error) {
console.log(error);
});
}
</script>

上述代码使用了Axios库来发送POST请求。当用户在搜索框中输入姓名时,searchStudent函数会被调用。函数首先获取用户输入的姓名,然后使用Axios发送POST请求到search_student.php页面,并将用户输入的姓名作为POST参数传递。当从服务器返回响应时,response.data包含了从数据库中查询到的学生信息,我们将该信息显示在网页上的results元素中。

要在网页上使用上述代码,可以在合适的位置添加一个搜索框和一个用于显示查询结果的容器元素:

<input type="text" id="search_name" onkeyup="searchStudent()" placeholder="请在此输入学生姓名">
<div id="results"></div>

当用户在搜索框中输入姓名时,查询结果会实时显示在results元素中。这样,用户就可以在不刷新整个页面的情况下,实时查询数据库中的学生信息。

通过以上的例子,我们看到如何使用PHP和AJAX技术来查询数据库。通过这种方式,我们能够实现更加交互式和实时的网页应用程序。无论是学生管理系统还是其他需要动态查询数据库的应用,都可以轻松地通过AJAX来实现。

本文链接:https://my.lmcjl.com/post/16002.html

展开阅读全文

4 评论

留下您的评论.