HTML加载JSON文件报Unexpected token ':'错误的原因及解决方法

你直接通过<script>标签的src属性引入JSON文件，浏览器会将返回的JSON内容当作JavaScript代码执行：
JSON开头的{会被JS解析为代码块标记，而非对象字面量的起始标记，后续紧跟的:不符合JS代码块的语法规则，因此抛出Uncaught SyntaxError: Unexpected token ':'错误。

另外补充你早期废弃代码的隐藏问题：如果<script>标签设置了src属性，标签内部编写的JavaScript代码会完全失效，你之前写的change函数根本不会被浏览器解析执行。

推荐使用fetch异步请求加载JSON文件，无需修改原JSON文件内容，示例代码如下：

<html>
    <body>
        <button id="clickThis">
            Text here
        </button>
        <script>
            // 发起请求加载本地JSON文件
            fetch('./lista.json')
                .then(res => res.json())
                .then(jsonData => {
                    // 绑定按钮点击事件，拿到JSON数据后可按需使用
                    document.getElementById('clickThis').addEventListener('click', function() {
                        // 示例：点击按钮后将文本替换为JSON里的test字段值
                        this.textContent = jsonData.data.test;
                    })
                })
                .catch(err => console.error('JSON加载失败：', err));
        </script>
    </body>
</html>

如果你一定要通过<script>标签加载对应内容，可以将JSON文件改为JSONP格式：

1. 修改原lista.json的文件后缀为.js，内容修改为：

getJsonData({"data": {"test":"0123"}})

2. 修改HTML代码如下：

<html>
    <body>
        <button id="clickThis">
            Text here
        </button>
        <script>
            // 提前定义JSONP的回调函数
            function getJsonData(jsonData) {
                document.getElementById('clickThis').addEventListener('click', function() {
                    this.textContent = jsonData.data.test;
                })
            }
        </script>
        <script src="./lista.js"></script>
    </body>
</html>

内容的提问来源于stack exchange，提问作者Ray