如何编写带有修饰词，突出显示语法的JSON结果的HTML JSON AJAX测试工具? [英] How to write an HTML JSON AJAX test harness with prettify, syntax highlighted JSON result?
问题描述
我已经编写了JSON API，但是我将不在视图上工作.
I've written a JSON API, but I won't be working on the views.
如何通过带有修饰，突出显示语法的JSON结果的简单网页测试JSON API?
How do I test the JSON API with a simple webpage with prettify, syntax highlighted JSON result?
我们以下面的GET API调用为例:
Let's use the following GET API call as an example:
http://www. google.com/calendar/feeds/developer-calendar@google.com/public/full?alt=json
注意:该问题仅供参考，将提供答案.我搜索了却没有找到类似的答案.
NOTE: this question is meant to be instructional, answer will be provided. I searched and didn't find a similar answer.
推荐答案
这是带有嵌入式javascript的整个HTML文件.
Here's the entire HTML file with in-line javascript.
我在解决方案中使用了jQuery和 highlight.js .
I used jQuery and highlight.js in the solution.
我在Chrome上运行了结果，但我认为它在IE中无法正常运行.
I ran the result on Chrome, I don't believe it works properly in 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>
这篇关于如何编写带有修饰词，突出显示语法的JSON结果的HTML JSON AJAX测试工具?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
