jQuery 模板将 JSON 数据显示为格式化的 HTML答案

【问题标题】：jQuery templating to display JSON data into formatted HTMLjQuery 模板将 JSON 数据显示为格式化的 HTML
【发布时间】：2013-01-15 04:07:08
【问题描述】：

我在使用查询模板显示一些 json 数据时遇到了困难：

这是我的代码：

这是json：

{
    "title": "The ppt presenation",
    "date_created": "9242010",
    "last_modified": "9242011",
    "author": "Mistic Frenzies",
    "slides": [
        {
            "Slide": "1",
            "header": "sdfsdf",
            "src": "ghkkgh.jpg",
            "Content": [
                {
                    "bullet": ""
                },
                {
                    "bullet": ""
                },
                {
                    "bullet": ""
                },
                {
                    "bullet": ""
                },
                {
                    "bullet": ""
                }
            ]
        },
        {
            "Slide": "2",
            "header": "sdfsdf",
            "src": null,
            "Content": [
             {
                    "bullet": ""
                },
                {
                    "bullet": ""
                },
                {
                    "bullet": ""
                },
                {
                    "bullet": ""
                },
                {
                    "bullet": ""
                }
            ]
        },
        {
            "Slide": 3,
            "header": "dsggd",
            "src": "sdfsdf.jpg",
            "Content": [
                {
                    "bullet": ""
                },
                {
                    "bullet": ""
                },
                {
                    "bullet": ""
                },
                {
                    "bullet": ""
                },
                {
                    "bullet": ""
                }
            ]
        }
    ]
}

这里是 JavaScript：

<head>
<style type="text/css"></style>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

<script id="ititemplate" type="text/x-jquery-tmpl">
    <h2>${title}</h2>
    <li>${author}</li>
        {{each slides}}
            <h3>${header}</h3>
            <li>${slide}</li>
            <ol>
                {{each Content}}
                    <li style="background-color:#98FB98;">${bullet}</li>
                {{/each}}
            </ol>
        {{/each}}
</script>

<script type="text/javascript">
    $(document).ready(function() {
        $('#powerpoint').click(function() {
            //var jsonloc = "ppt.json";
            $.getJSON('ppt.json',function(info){
                $('#header').empty();
                $('#ititemplate').tmpl(info).appendTo('#header');                       
            });                                 
        }); 
    });

</script>

</head>
<body>

<a href="#" id="powerpoint">Powerpoint</a>
<div id="header">
</div>
</body>

所以，我不确定出了什么问题。当我单击 html 链接以显示数据时，什么也没有出现。我想知道我创建的模板是否有问题。有什么建议？

【问题讨论】：

您在日志中看到任何错误吗？
模板html结构无效H2或H3或OL不能是LI的兄弟
您能否检查控制台中的任何 javascript 错误，这里似乎工作正常 jsfiddle.net/arunpjohny/P3JKY
控制台没有给我任何脚本错误...有人看到 Javascript 有什么问题吗？
我修复了html模板格式。

标签： jquery json

【解决方案1】：

代码看起来不错。我认为 getJSON 需要更长的时间来返回信息，并且您的代码在完成之前正在执行 appendTo 命令。您可以在 jquery 中使用 deferred（即 when....then）或使用 $.ajax 并使用其成功方法对信息进行模板化，如下所示：

   $.ajax({
            type: "POST",
            url: 'ppt.json',
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (info) {
                 $('#header').empty();
                $('#ititemplate').tmpl(info).appendTo('#header');   
            },
            error: function (jqXHR, textStatus, errorThrown) {
                //failure function goes here..
            }
        });

希望对你有帮助。

【讨论】：

谢谢！我想尝试让它在没有 ajax 的情况下工作。所以我尝试了延迟： $.when($.getJSON('intrislam.json') ).then(function(info){