Javascript 有效的JSON中断HandlebarsJS和$.getJSON调用

给定带有锚和把手/胡子模板的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>

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);
});

给定一个JS handlebar.JS调用，例如：

<!-- 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>

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);
});

为什么我获取并出错

未捕获的语法错误：意外标记：

？

如何让它工作

JSfiddle：

---

编辑：当我将JSON重组为

{
  "people"
  :
     [ 
       ... 
     ]
}

---

错误消息指向第三行，带有

：“

我刚刚尝试过，问题是

//bl.ocks.org/hugolpz/raw/8075193/data.json？callbackName

正在发回json，而不是有效的JSONP回调。由于URL中的回调=？，jQuery将使用JSONP，而不是JSON。JSON！=JSONP。是一种文本数据表示法。是一种使用

script

标记跨域传递JSON的方法。（示例如下。）

如果控制该URL返回的内容，则可以对其进行更改，使其将JSON封装在适当的JSONP包装器中（基本上是将JSON放入函数调用中，其中函数名来自URL中的

回调

参数）

如果您无法控制URL返回的内容，则除非该服务器支持并允许您的源站，并且您使用的是，否则您将无法跨域加载该数据，因为存在错误

---

以下是该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"
        }
    ]
})

---

json对象！=json对象？？我不知道。删除

？回调=？

返回另一个失败：

XMLHttpRequest无法加载http://bl.ocks.org/hugolpz/raw/8075193/data.json. 请求的资源上不存在“Access Control Allow Origin”标头。

@Hugolpz:对，因为SOP。我猜你可能会遇到这个问题，并更新了答案。：-）