Uncaught SyntaxError: Unexpected token ':' JSON答案

【问题标题】：Uncaught SyntaxError: Unexpected token ':' JSONUncaught SyntaxError: Unexpected token ':' JSON
【发布时间】：2020-12-15 15:39:22
【问题描述】：

我在 JSON 文件的第 2 行收到错误“Uncaught SyntaxError: Unexpected token ':'”。

这是我正在使用的 HTML。我从“https://css-tricks.com/dynamic-dropdowns/”获得了 HTML 和 JSON。他们的演示效果很好，所以我想自己尝试一下，但在桌面上运行时遇到了问题。

<!DOCTYPE html>
<head>
    <meta charset='UTF-8'>
    
    <title>Dynamic Dropdown</title>
    
    <link rel='stylesheet' href='css/style.css'>
    
    <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> -->

</head>

<body>

    <div id="page-wrap">
    
        <h1>Pulls from text files</h1>

        <select id="text-one">
            <option selected value="base">Please Select</option>
            <option value="beverages">Beverages</option>
            <option value="snacks">Snacks</option>
        </select>
        
        <br />
        
        <select id="text-two">
            <option>Please choose from above</option>
        </select>
        
        <h1>Pulls from JSON</h1>

        <select id="json-one">
            <option selected value="base">Please Select</option>
            <option value="beverages">Beverages</option>
            <option value="snacks">Snacks</option>
        </select>
    
        <br />
    
        <select id="json-two">
            <option>Please choose from above</option>
        </select>
    
    </div>
    
    <script src="?\jsondata\data.json">
        $(function() {
        
            $("#text-one").change(function() {
                $("#text-two").load("textdata/" + $(this).val() + ".txt");
            });
            
            $("#json-one").change(function() {
            
                var $dropdown = $(this);
            
                $.getJSON("jsondata/data.json", function(data) {
                
                    var key = $dropdown.val();
                    var vals = [];
                                        
                    switch(key) {
                        case 'beverages':
                            vals = data.beverages.split(",");
                            break;
                        case 'snacks':
                            vals = data.snacks.split(",");
                            break;
                        case 'base':
                            vals = ['Please choose from above'];
                    }
                    
                    var $jsontwo = $("#json-two");
                    $jsontwo.empty();
                    $.each(vals, function(index, value) {
                        $jsontwo.append("<option>" + value + "</option>");
                    });
            
                });
            });

        });
    </script>
    
</body>

</html>

这是我正在使用的出现错误的 JSON。

  {
    "beverages": "Coffee,Coke",
    "snacks": "Chips,Cookies"
    }

请帮忙。

【问题讨论】：

您不能在带有“src”属性的<script> 标记中包含脚本内容。

标签： javascript html json

【解决方案1】：

<script> 元素用于加载 JavaScript，而不是 JSON。

您收到错误是因为浏览器试图将其作为 JS 执行，但实际上并非如此。

从<script> 元素中删除src 属性。

使用 Ajax 获取 JSON。然后解析成一个JS对象。 <script> 元素的主体（当前被忽略，因为你给了它一个 src）正在尝试这样做。

【讨论】：