Question

给定带锚点的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 （证明有效且来自第三方网站）：

{
    "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"
  :
     [ 
       ... 
     ]
}

错误消息指向带有":"的第3行。

Answer 1

我刚尝试过，问题是//bl.ocks.org/hugolpz/raw/8075193/data.json?callback=callbackName正在发回JSON，而不是有效的JSONP回调。由于您的URL中有callback=?，jQuery将期待JSONP，而不是JSON。 JSON！= JSONP。 JSON是一种文本数据符号。 JSONP是使用script标记提供JSON跨域的一种方法。（以下示例。）

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

如果您不控制网址返回的内容，那么除非该服务器支持CORS并且它允许您的来源和您使用{{3} }，由于CORS-enabled browser，您无法加载该数据跨域。

以下是该网址发回的内容：

{ "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会中断HandlebarsJS和$ .getJSON调用

1 个答案: