从数据库查询出数据以json的数据展示在index.html中

首先，在后端（如PHP）中，需要查询出需要展示的数据，并将其转换为JSON格式返回给前端；然后，在前端（如JavaScript）中，需要使用AJAX请求获取数据，并将其展示在HTML中。

后端实现：

1. 连接数据库，查询数据。

2. 将查询出的数据转换为JSON格式。

3. 返回JSON数据。

示例代码：

<?php
// 连接数据库
$conn = mysqli_connect('localhost', 'username', 'password', 'database');

// 查询数据
$sql = "SELECT * FROM table";
$result = mysqli_query($conn, $sql);

// 将数据转换为JSON格式
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
    $data[] = $row;
}
$json = json_encode($data);

// 返回JSON数据
header('Content-Type: application/json');
echo $json;
?>

前端实现：

1. 使用AJAX请求获取数据。

2. 将获取到的JSON数据解析为JavaScript对象。

3. 将数据展示在HTML中。

示例代码：

<div id="data"></div>

<script>
// 使用AJAX请求获取数据
var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.php');
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 将获取到的JSON数据解析为JavaScript对象
        var data = JSON.parse(xhr.responseText);
        // 将数据展示在HTML中
        var html = '';
        data.forEach(function(item) {
            html += '<div>' + item.name + ' - ' + item.age + '</div>';
        });
        document.getElementById('data').innerHTML = html;
    }
};
xhr.send();
</script>