未捕获的SyntaxError:意外的标记':‘JSON

Question

在我的JSON文件的第2行，我得到了错误“Uncaught : Unexpected ':‘”。

这是我正在使用的HTML。我从"https://css-tricks.com/dynamic-dropdowns/"“上获得了超文本标记语言和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"
    }

请帮帮忙。

Answer 1

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

您会收到一个错误，因为浏览器试图将其作为JS执行，但实际上并不是这样。

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

使用Ajax获取JSON。然后将其解析为JS对象。<script>元素的主体(当前被忽略，因为您给了它一个src)正试图做到这一点。