JQuery $.ajax({}) - ajax 解析错误和 knockout

Question

我有一个 JS(data.js) 文件，数据为

var Content = {
    Page1: {
        Tiles: [
        { "id": "1",
            "className": "home-test-class",
            "tileType": "widget",
            "tileColor": "red",
            "Bookmark": : {
                "Icon": "iconset", 
                "Class": "dummytext", 
                "Content": "Dummy Content",
                "URL": ""
            },
            "Tile": false,
            "SmallWidget": false,
            "Widget": false
        },
        { 
        "id": "1",
            "className": "title-class",
            "tileType": "widget",
            "tileColor": "red",
            "Bookmark": false,
            "Tile": false,
            "SmallWidget": false,
            "Widget": false
        },
        ]
    }
}

我创建了一个 INIT 方法来使用这些数据

Init = function () {
        $.ajax({
            url: 'scripts/data.js',
            dataType: "json",
            contentType: 'application/json; charset=utf-8'
        }).done(function (data) {
            $.doTimeout(1000, function () {
                console.log(data);
                LoadViewData(data);
            });

        }).fail(function (request, error) {
            //Handle Failures here.
            alert('Error' + error);
        });
        ko.applyBindings(this);
    },

它给了我一个 JsonParse 错误。

我正在使用 knockout 将数据绑定(bind)到 UI。当我使用 Fiddler 并检查响应时，它说“所选响应不包含无效的 JSON 文本

请告诉我如何修复它。

Answer 1

这是因为您返回的是 Javascript 文件，而不是 JSON 数据。以这种方式使用 Javascript 文件是没有意义的。

如果您将文件更改为仅包含 JSON 字符串(下面的示例)，并且假设您的 $.ajax() 调用的其余部分没有问题，则它将工作 。请注意 proper JSON string 将所有名称括在双引号中。另外，如果您通过 validator 运行 JSON ，您会发现它有一些问题(我已在示例中修复了这些问题)。

{
    "Page1": {
        "Tiles": [
            {
                "id": "1",
                "className": "home-test-class",
                "tileType": "widget",
                "tileColor": "red",
                "Bookmark": {
                    "Icon": "iconset",
                    "Class": "dummytext",
                    "Content": "Dummy Content",
                    "URL": ""
                },
                "Tile": false,
                "SmallWidget": false,
                "Widget": false
            },
            {
                "id": "1",
                "className": "title-class",
                "tileType": "widget",
                "tileColor": "red",
                "Bookmark": false,
                "Tile": false,
                "SmallWidget": false,
                "Widget": false
            }
        ]
    }
}