页面加载出现Uncaught SyntaxError: Unexpected token :错误，求排查原因

阿华AIGC实验室

2026-5-28

解决页面加载时的Uncaught SyntaxError: Unexpected token :错误

嘿，我来帮你揪出这个语法错误的根源，顺便把隐藏的问题也一起解决掉！

错误的直接原因：错误的JSON引入方式

你在HTML的<head>里加了这么一行：

<script type="primary" src="colors.json"></script>

浏览器对<script>标签的处理逻辑是这样的：如果它不认识你指定的type值（这里的primary完全不是标准的脚本类型），就会默认把它当作JavaScript代码去解析。但colors.json是JSON格式的文本，不是合法的JS代码，当浏览器读到JSON里的:符号时，就会触发Unexpected token :的语法错误。

而且你已经通过XMLHttpRequest手动请求这个JSON文件了，这个多余的<script>标签完全没用，直接删掉它就能解决这个加载时的语法错误。

隐藏的JSON格式问题

除了上面的问题，你的colors.json文件还有一个不符合JSON规范的地方：数组最后一个元素后面多了个尾随逗号：

{ "color": "white", "category": "value", "code": { "rgba": [0,0,0,1], "hex": "#FFF" } },

这里的末尾逗号需要删掉，JSON严格禁止这种“尾随逗号”，虽然部分宽松的解析器能兼容，但为了避免后续解析失败，必须修正这个问题。

修正后的完整代码

修正后的HTML

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
<head> 
  <meta charset="utf-8"> 
  <script type="text/javascript">
    function load() {
      var someData_notJSON = JSON.parse(data);
      console.log(someData_notJSON[0].red);
    }
    function loadJSON(callback) {
      var xobj = new XMLHttpRequest();
      xobj.overrideMimeType("application/json");
      xobj.open('GET', 'colors.json', true);
      xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {
          callback(xobj.responseText);
        }
      };
      xobj.send(null); //line 24
    }
    function init() {
      loadJSON(function(response) {
        var actual_JSON = JSON.parse(response);
        console.log(actual_JSON);
      });
    }
  </script> 
  <title></title> 
</head> 
<body> 
  <button type="button" name="button" onclick="init()">Click me</button> 
</body> 
</html>

修正后的colors.json

{ 
  "colors": [ 
    { 
      "color": "black", 
      "category": "hue", 
      "type": "primary", 
      "code": { 
        "rgba": [255,255,255,1], 
        "hex": "#000" 
      } 
    }, 
    { 
      "color": "white", 
      "category": "value", 
      "code": { 
        "rgba": [0,0,0,1], 
        "hex": "#FFF" 
      } 
    } 
  ] 
}

内容的提问来源于stack exchange，提问作者Alpha Bravo Charlie ...