浏览器正在解析错误的 HTML 内容

Question

我想编写一个函数，首先从我的数据库中检索所有帐户数据，然后将它们分类为用户友好的 HTML table。在那里，用户可以 select 一些帐户，并更改它们。这是我的代码：

$.ajax({
    url: "./database.php",
    type: "POST",
    data: {
        todo: "adminGetAccountTable",
        b: userInfo["UserId"],
        c: userInfo["Password"],
        session: userInfo["SessionName"]
    },
    success: function(response) {
        $("#loadingIcon").css("display", "none");
        console.log(response);
        if (response !== "No accounts registered") {
            var json = JSON.parse(response);
            var accountsTable = "<table class='w3-table-all' id='accountsTable'><thead><tr><th>&nbsp;</th><th><b class='link link-primary' id='00'>NUTZER-ID&nbsp;</a></th><th><b class='link link-primary' id='01'>ERSTELLDATUM&nbsp;</a></th><th><b class='link link-primary' id='02'>NAME&nbsp;</a></th><th><b class='link link-primary' id='03'>VORNAME&nbsp;</a></th><th><b class='link link-primary' id='04'>E-MAIL-ADRESSE&nbsp;</a></th><th><b class='link link-primary' id='05'>GESAMTSTUNDEN&nbsp;</a></th><th><b class='link link-primary' id='06'>ACCOUNTTYP&nbsp;</a></th></tr></thead><tbody>";
            var index = 0;
            for (var current in json) { // 'json' is the data coming from my database
                accountsTable += "<tr>";
                accountsTable += "<td><input type='checkbox' onchange='toggleSelectedEntry(" + index + ", true);'></td>";
                // More user information gets written here
                index++;
            }
            accountsTable += "</tbody></table>";
            document.getElementById("accountsDiv").innerHTML += accountsTable; // Add the table to the div container
        }
    }
});

条目都有一个唯一的id（当前索引）。函数 toggleSelectedEntry() 然后 adds/removes 来自存储所有 selected 条目的数组的条目。

唯一的问题是浏览器错误地解析了这个参数。它不是解析 0, 1, 2, 3, 4 等等，而是以一种奇怪的顺序解析它们：0, 4, 1, 2, 3。奇怪的是，执行console.log(accountsTable)时，索引的显示顺序是正确的。只有在浏览器编写和解析后，才会出现这种奇怪的顺序。

有人知道是什么原因造成的吗？如果有帮助，我也可以发送更多代码，我只是不想让我的问题太混乱。

编辑：这是我用来获取数据的 database.php 中的代码：

$stmt = $this->connection->prepare("SELECT UserId, Created, FirstName, LastName, Email, IF(PermissionId = 2, 'Admin', 'Nutzer') AS PermissionString FROM users");
$stmt->execute();
$stmtResult = $stmt->get_result();
$rows = array();
while ($r = mysqli_fetch_assoc($stmtResult)) {
    $rows[] = $r;
}
if ($rows == array()) {
    error_log("Cancelled Interaction: No accounts registered");
    echo("No accounts registered");
    exit;
} else {
    foreach ($rows as &$value) {
        foreach ($value as &$field) {
            $field = utf8_encode($field);
        }
    }
    $outputValue = json_encode($rows, JSON_UNESCAPED_UNICODE);
    echo(utf8_decode($outputValue));
    exit;

这 returns 类似于：

[{"UserId":"61fe559d1dd35\u0000\u0000\u0000","Created":"2022-02-05 11:46:53","FirstName":"Nico","LastName":"Marikucza","Email":"nicomarikucza@googlemail.com","PermissionString":"Admin"},{"UserId":"62041298682a0\u0000\u0000\u0000","Created":"2022-02-09 20:14:32","FirstName":"Peter","LastName":"Marikucza","Email":"marikucza.p@gmail.com","PermissionString":"Nutzer"}]

Answer 1

我自己弄明白了（在评论的帮助下）。

我发现我在 JS 中使用了一个函数来按 LastName 升序对数据进行排序。但这与数据库的输出不匹配，导致程序分配错误的数字。我也通过简单地通过 MySQL 对输出进行排序来解决此问题：

SELECT UserId, Created, FirstName, LastName, Email, IF(PermissionId = 2, 'Admin', 'Nutzer') AS PermissionString FROM users ORDER BY LastName ASC

浏览器正在解析错误的 HTML 内容

Browser is parsing the wrong HTML content

javascript

html

dom