1

我已经编写了一个 JSON API，但我不会处理视图。

如何使用带有美化、语法突出显示的 JSON 结果的简单网页来测试 JSON API ？

让我们以以下 GET API 调用为例：

http://www.google.com/calendar/feeds/developer-calendar@google.com/public/full?alt=json

注意：这个问题是指导性的，将提供答案。我搜索并没有找到类似的答案。

4

1 回答 1

3

这是带有内嵌 javascript 的整个 HTML 文件。

我在解决方案中使用了 jQuery 和highlight.js。

我在 Chrome 上运行了结果，我不相信它在 IE 中正常工作。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/highlight.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/default.min.css" />

    <script>
    $(document).ready(function() {
        hljs.initHighlightingOnLoad();
        $.ajax({
            url: "http://www.google.com/calendar/feeds/developer-calendar@google.com/public/full",
            dataType: "json",
            //contentType: "application/json; charset=utf-8", // NOTE: use this parameter when calling your host server, but doesn't work with this google api
            type: "GET",
            data : { alt: "json" },
            complete: function(xhr, textStatus) {
                // set status
                $("#status").html(textStatus);

                // set plaintext
                $("#result").val(xhr.responseText);

                // set prettytext
                var data = JSON.parse(xhr.responseText);
                var stringify = JSON.stringify(data, undefined, 2);
                var prettify = hljs.highlightAuto(stringify).value;
                prettify = hljs.fixMarkup(prettify);
                $("#prettyResult").html(prettify);
            }
        });
    });
    </script>

</head>
<body>
    <tt>Status: <span id="status">waiting ...</span></tt><br /><br />
    <textarea id="result" style="width: 1024px; height: 100px;"></textarea>
    <pre><code id="prettyResult" class="json" style="width: 1024px;"></code></pre>

</body>
</html>
于 2013-03-01T19:34:01.137 回答