这个HTML、JavaScript和JSON代码有什么问题

What is wrong with this HTML, JavaScript and JSON code?

本文关键字：代码 什么 问题 JSON HTML JavaScript 这个      更新时间：2023-12-17

我在一个名为test.html的文件中有以下HTML代码。下面的HTML文件和JSON文件都存储在同一目录下的服务器上。

<!DOCTYPE html>
<html>
<head>
<title>Shape Up</title>
<meta name="robots" content="noindex,follow">
<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="JavaScript" type="text/javascript">
function ajax_get_json()
{
    var hr = new XMLHttpRequest();
    hr.open("GET", "game.json", true);
    hr.setRequestHeader("Content-type", "application/json", true);
    hr.onreadystatechange = function()
    {
        if(hr.readyState == 4 && hr.status == 200)
        {
            var data = JSON.parse(hr.responseText);
            var results = document.getElementById("results");
            results.innerHTML = "";
            for(var obj in data)
            {
                results.innerHTML += data[obj].title;
            }
        }
    }
    hr.send(null);
    results.innerHTML = "requesting...";
}
</script>
</head>
<body>
<div id="results"></div>
<script language="JavaScript" type="text/javascript">
ajax_get_json();
</script>
</body>
</html>

它从存储在同一目录中的名为game.json的文件中提取数据。

{
    "level_001":
    {
        "id":001,
        "title":"Level 1",
        "difficulty":0,
        "comments":"this is how you complete level 1"
    },
    "level_002":
    {
        "id":002,
        "title":"Level 2",
        "difficulty":0,
        "comments":"this is how you complete level 2"
    }
}

问题是永远无法到达results.innerHTML = "";线。为什么

浏览器中没有错误，我已经在Firefox和Safari上检查过了。

根据jsonlint.com，您的JSON因以下属性而无效：

"id":001
...
"id":002

您需要删除前导零：

"id":1

或者使数字字符串：

"id":"001"

有关更多详细信息，请参阅json.org 上的格式规则

大概是因为JSON.parse()给出了一个关于以上内容的错误，所以您提到的行永远不会到达。（您在浏览器控制台中没有看到错误吗？）

相关文章：