如何使用数组将带有id的PHP表值链接到javascript？

<?php
// 连接数据库
$servername = "数据库服务器地址";
$username = "数据库用户名";
$password = "数据库密码";
$dbname = "数据库名";

$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 查询表值并存储在数组中
$sql = "SELECT id, value FROM 表名";
$result = $conn->query($sql);

$data = array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}

// 将数组转换为JSON格式并输出
echo json_encode($data);

// 关闭数据库连接
$conn->close();
?>

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        
        // 在这里可以使用获取到的数组数据进行后续操作
        console.log(data);
    }
};
xhr.open("GET", "php脚本地址.php", true);
xhr.send();

// 假设有一个用于显示数据的HTML元素，例如<div id="data"></div>
var dataElement = document.getElementById("data");

for (var i = 0; i < data.length; i++) {
    var id = data[i].id;
    var value = data[i].value;
    
    // 创建一个新的HTML元素来显示id和value值
    var itemElement = document.createElement("div");
    itemElement.innerHTML = "ID: " + id + ", Value: " + value;
    
    // 将新的HTML元素添加到dataElement中
    dataElement.appendChild(itemElement);
}