我已经编写了一个 JSON API，但我不会处理 View 。
如何使用带有美化、语法高亮 JSON 结果的简单网页测试 JSON API？
让我们以下面的 GET API 调用为例:
http://www.google.com/calendar/feeds/developer-calendar@google.com/public/full?alt=json
注意:这个问题是指导性的，将提供答案。我进行了搜索，但没有找到类似的答案。
最佳答案
这是带有内联 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>
关于javascript - 如何使用美化、语法突出显示的 JSON 结果编写 HTML JSON AJAX 测试工具？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15165434/