phpjson格式化输出
⼏种JSON数据在页⾯上格式化展⽰的⽅案
1. JSON.stringify()⽅法
如下⽰例，original是⼀个 textarea，会在输⼊框失去焦点的时候格式化JSON数据
html
<textarea class="form-control" id="original" rows="20" placeholder="Please input JSON data here ..." ></textarea> js
<!--失去焦点的时候格式化 JSON 数据-->
$('#original').blur(function() {
var input;
try {
if ($('#original').val().length == 0) {
return;
}
input = eval('(' + $('#original').val() + ')');
} catch (error) {
return alert("Input data is not valid JSON, please check. Error: " + error);
}
$('#original').val(JSON.stringify(input, null, 4));
});
2. json-viewer插件
所要的CSS和JS⽂件下载地址：
⾸先引⼊CSS：
<!-- JSON Viewer -->
<link href="/static/css/campaign/jquery.json-viewer.css" rel="stylesheet">
<script src="../static/components/jquery/dist/jquery.min.js"></script>
<!-- JSON viewer -->
<script src="/static/js/campaign/jquery.json-viewer.js"></script>
如下⽅法可以将JSON数据进⾏格式化：
$('#btn-json-viewer').click(function() {
try {
var input = eval('(' + $('#original').val() + ')');
} catch (error) {
return alert("Cannot eval JSON: " + error);
}
$('#original').hide();
$('#json-renderer').show();
$('#btn-json-viewer').hide();
$('#btn-json-viewer1').show();
$('#json-renderer').jsonViewer(input, {collapsed: false, withQuotes: true});
});
3. ACE 编辑器
<script type="text/javascript" src="/static/js/campaign/ace/ace.js"></script>
js
<script>
$(document).ready(function () {
});
var editor = ace.edit("editor");
editor.setOptions({
mode: 'ace/mode/json',
theme: 'ace/theme/twilight',
tabSize: 2,
wrap: true,
})
<!-- 这⾥获取JSON数据，并将其放⼊Editor中 -->
editor.setValue(JSON.stringify(data, null, '\t'));
</script>
html
<div class="ibox-content" >                        <style type="text/css" media="screen">
#editor {
height: 650px;
}
</style>
<div id="editor"></div>
</div>
获取输⼊值的参考：
$(function() {
<!--点击校验-->
$('#btn-validate').click(function() {
var jsonDataEle = ace.edit("jsonData");
var jsonSchemaEle = ace.edit("jsonSchema");
var jsonData = Value();
var jsonSchema = Value();        });
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。