javascript - 有效的 JSON 会破坏 HandlebarsJS 和 $.getJSON 调用

Question

给定带有 anchor 和 Handlebars / mustache 模板的 html:

<!-- 1. Anchor -->
<div id="anchor">Anchor</div>

<!-- 2. HTML-Mustache template -->
<script id="ẗpl" type="text/template">
    {{#people}}
       <li><b>{{family}} {{name}}</b> ({{title}}, {{place}}) : {{introduction}}.</li>
    {{/people}}
</script>

给定 data.json(已证明有效且来自第 3 方网站):

{
    "people": [
        {
            "family": "Lopez",
            "name": "Hugo",
            "title": "leader",
            "place": "Paris",
            "introduction": "GIS cartographer, Gdal & D3js enthusiast, Cartographic workshop's dinosaure & rennovator"
        },
        {
            "family": "Ganesh",
            "name": "Arun",
            "title": "co-leader",
            "place": "Dharamsala",
            "introduction": "GIS cartographer, D3js enthusiast, interactions designers & wikidata tinker"
        }
    ]
}

给定一个 JS handlebars.js 调用:

var url = '//bl.ocks.org/hugolpz/raw/8075193/data.json?callback=?'; // get loaded successfully
// Action below fails:
$.getJSON(url, function (data) {
    var template = $('#tpl').html();
    var stone = Handlebars.compile(template)(data);
    $('#anchor').append(stone);
});

为什么我会收到错误 Uncaught SyntaxError: Unexpected token : ?

如何让它发挥作用？

JSfiddle:http://jsfiddle.net/YGwJ9/9/

<小时/>

编辑:当我将 JSON 重组为

{
  "people"
  :
     [ 
       ... 
     ]
}

错误消息通过":"指向第三行。

Answer 1

我刚刚尝试了一下，问题是//bl.ocks.org/hugolpz/raw/8075193/data.json?callback=callbackName正在发送回 JSON，而不是有效的 JSONP 回调。因为callback=?在您的 URL 中，jQuery 将需要 JSONP，而不是 JSON。 JSON!= JSONP。 JSON是一种文本数据符号。 JSONP是一种使用 script 传递 JSON 跨域的方法标签。 (以下示例。)

如果您控制该 URL 返回的内容，则可以更改它，以便将 JSON 包装在适当的 JSONP 包装器中(基本上将 JSON 放入函数调用中，其中函数的名称来自 callback 参数网址)。

如果您不控制 URL 返回的内容，则除非该服务器支持 CORS它允许您的来源并且您正在使用 CORS-enabled browser ，您将无法跨域加载该数据，因为 Same Origin Policy .

<小时/>

以下是该 URL 发回的内容:

{ "people": [
        {
            "family": "Lopez",
            "name": "Hugo",
            "title": "leader",
            "place": "Paris",
            "introduction": "GIS cartographer, Gdal & D3js enthusiast, Cartographic workshop's dinosaure & rennovator",
            "photo": "img/WikiAtlas_Lopez_Hugo_Yug.jpg",
            "twitter": "http://twitter.com/Hugo_lz"
        },
        {
            "family": "Ganesh",
            "name": "Arun",
            "title": "co-leader",
            "place": "Dharamsala",
            "introduction": "GIS cartographer, D3js enthusiast, interactions designers & wikidata tinker",
            "photo": "img/WikiAtlas_Ganesh_Arun_Planemad.jpg",
            "twitter": "http://twitter.com/Edouard_lopez"
        },
        {
            "family": "Lopez",
            "name": "Edouard",
            "title": "support",
            "place": "Bordeaux",
            "introduction": "Backend admin & Frontend professional webdev, scripts & stack consulting",
            "photo": "img/WikiAtlas_Lopez_Edouard_Lyhana8.jpg",
            "twitter": "http://twitter.com/Plandemad"
        }
    ]
}

这是一个有效的 JSONP 响应:

callbackName({ "people": [
        {
            "family": "Lopez",
            "name": "Hugo",
            "title": "leader",
            "place": "Paris",
            "introduction": "GIS cartographer, Gdal & D3js enthusiast, Cartographic workshop's dinosaure & rennovator",
            "photo": "img/WikiAtlas_Lopez_Hugo_Yug.jpg",
            "twitter": "http://twitter.com/Hugo_lz"
        },
        {
            "family": "Ganesh",
            "name": "Arun",
            "title": "co-leader",
            "place": "Dharamsala",
            "introduction": "GIS cartographer, D3js enthusiast, interactions designers & wikidata tinker",
            "photo": "img/WikiAtlas_Ganesh_Arun_Planemad.jpg",
            "twitter": "http://twitter.com/Edouard_lopez"
        },
        {
            "family": "Lopez",
            "name": "Edouard",
            "title": "support",
            "place": "Bordeaux",
            "introduction": "Backend admin & Frontend professional webdev, scripts & stack consulting",
            "photo": "img/WikiAtlas_Lopez_Edouard_Lyhana8.jpg",
            "twitter": "http://twitter.com/Plandemad"
        }
    ]
})