JQuery $ .ajax({}) - ajax parseerror和Knockout

时间:2012-07-20 05:50:20

标签: jquery json knockout.js getjson

我有一个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将数据绑定到UI。当我使用Fiddler并检查响应时,它会说“所选的响应不包含vaid JSON文本

请告诉我如何解决。

1 个答案:

答案 0 :(得分:4)

这是因为你要返回一个Javascript文件,而不是JSON数据。以这种方式使用Javascript文件是没有意义的。

如果您将文件更改为只是包含JSON字符串(例如下面的代码),并假设您的$.ajax()调用的其余部分没有问题,那么它将起作用。请注意,proper JSON字符串用双引号括起所有名称。此外,如果您通过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
            }
        ]
    }
}