PHP Ajax -在表中显示部分数据？

基础概念

PHP（Hypertext Preprocessor）是一种通用开源脚本语言，主要用于服务器端开发。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过Ajax，可以在后台与服务器进行少量数据交换，使网页应用能够快速地更新网页的部分内容。

类型

GET请求：用于从服务器获取数据。
POST请求：用于向服务器发送数据。

应用场景

动态内容更新：例如新闻动态、股票价格等实时数据的更新。
表单验证：在用户提交表单之前，通过Ajax进行前端验证。
搜索建议：用户在输入搜索关键词时，实时显示相关的搜索建议。

示例代码

以下是一个简单的PHP和Ajax示例，展示如何在表格中显示部分数据：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax PHP Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <table id="data-table">
        <tr>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </table>
    <button id="load-data">Load Data</button>

    <script>
        $(document).ready(function() {
            $('#load-data').click(function() {
                $.ajax({
                    url: 'fetch_data.php',
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        var table = $('#data-table');
                        $.each(data, function(index, item) {
                            table.append('<tr><td>' + item.id + '</td><td>' + item.name + '</td></tr>');
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error('Error fetching data: ' + error);
                    }
                });
            });
        });
    </script>
</body>
</html>

PHP部分（fetch_data.php）

<?php
header('Content-Type: application/json');

// 模拟数据库查询
$data = [
    ['id' => 1, 'name' => 'Alice'],
    ['id' => 2, 'name' => 'Bob'],
    ['id' => 3, 'name' => 'Charlie']
];

echo json_encode($data);
?>