小项目：使用ajax异步get请求获取数据库信息并输出到浏览器页面，并使用JSON改进代码，实现前后端分离

这篇文章距离上次修改已过183天，其中的内容可能已经有所变动。

以下是一个使用jQuery和PHP的简单示例，展示了如何使用AJAX异步GET请求从数据库获取信息并将其输出到页面上。

前端代码 (HTML + JavaScript):




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX GET 请求示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#fetch-data').click(function() {
                $.ajax({
                    url: 'fetch_data.php',
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        var output = '';
                        $.each(data, function(key, val) {
                            output += '<p>' + val.id + ' - ' + val.name + '</p>';
                        });
                        $('#display-data').html(output);
                    },
                    error: function() {
                        alert('Error fetching data!');
                    }
                });
            });
        });
    </script>
</head>
<body>
 
<button id="fetch-data">获取数据</button>
<div id="display-data"></div>
 
</body>
</html>

后端代码 (PHP):




<?php
// fetch_data.php
 
// 假设连接已建立并且选择了数据库
// $conn = new mysqli($servername, $username, $password, $dbname);
// 假设表名为 'users'
 
$query = "SELECT id, name FROM users";
$result = $conn->query($query);
 
$data = [];
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}
 
header('Content-Type: application/json');
echo json_encode($data);
 
// 注意：确保在实际应用中处理好数据库连接和查询的安全性和错误处理
?>

在这个例子中，我们使用jQuery的$.ajax()方法发送GET请求到fetch_data.php。在成功获取数据后，我们遍历返回的JSON对象并将数据以HTML的形式插入到页面的#display-data元素中。这个例子展示了如何在Web开发中使用AJAX异步获取数据并更新页面内容的常见模式。

小项目：使用ajax异步get请求获取数据库信息并输出到浏览器页面，并使用JSON改进代码，实现前后端分离

评论已关闭

推荐阅读