jQuery getJSON 数据未加载到 tmpl答案

【问题标题】：jQuery getJSON data not loading into tmpljQuery getJSON 数据未加载到 tmpl
【发布时间】：2015-09-08 04:49:45
【问题描述】：

我正在尝试将一些 json 加载到 jQuery tmpl 中。

页面在这里：http://stefairclough.com/jsontest/

$(document).ready(function() {

    $.getJSON("http://stefairclough.com/jsontest/json.json",
            function(data){
                $("#news_articles").empty();
                $("#news_template").tmpl( data ).appendTo("#news_articles");
            })
            .error(function(xhr) {
                    console.log(xhr)
            });             
});

json 位于http://stefairclough.com/jsontest/json.js

我似乎无法弄清楚为什么它不起作用。

【问题讨论】：

请出示相关代码sn-ps

标签： jquery json jquery-templates

【解决方案1】：

您的 XHR 请求似乎失败了。尝试为您的 JSON 文件提供 JSON 标头。尝试重命名您的文件：

http://stefairclough.com/jsontest/json.json

【讨论】：

嗨，Henry，感谢您的建议，但我重命名了文件，但它仍然对我不起作用。
问题不在于 jquery 模板，而在于您的 GetJSON。文件stefairclough.com/jsontest/json.js 确实返回一个 json 字符串，但不是一个 json 标头。所以jQuery调用不会接受它。
我不知道你是生成 json.js 还是静态文件，这是服务器应得的，但那里有问题。
只是一个静态文件。我这样做只是为了弄清楚。再次感谢您的帮助！

【解决方案2】：

您的 JSON 似乎不是有效的 JSON。

请尝试使用以下代码检查您的 JSON：http://pro.jsonlint.com/

【讨论】：

感谢您的帮助！ JSON 无效

【解决方案3】：

您的 json 测试文件有一个尾随 ;删除那个

[
    {"Headline": "Headline Test 1", "Url": "http://stefairclough.com"}, 
    {"Headline": "Headline Test 2", "Url": "http://stefairclough.com"}, 
    {"Headline": "Headline Test 3", "Url": "http://stefairclough.com"}
]; <--- here

【讨论】：

好的，已经解决了谢谢！

【解决方案4】：

只需将 JS 文件放在脚本模板上方

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery.tmpl.js"></script>

<script id="news_template" type="text/x-jquery-tmpl">
        <div class="news_item">
            <h3>${Headline}</h3>
            <p>Source: <a href="${Url}" target="_blank">${Url}</a>
        </div>
    </script>

然后

$(document).ready(function() {

    $.getJSON("http://stefairclough.com/jsontest/json.js",
            function(data){
                $("#news_articles").empty();
                $("#news_template").tmpl( data ).appendTo("#news_articles");
            })
            .error(function(xhr) {
                    console.log(xhr)
            });             
});
</script>

【讨论】：

感谢您的帮助，我的脚本现在可以工作了，json 无效。