将后端返回的JSON数据按照JSON格式化展示在页面

1、引入js

<script type="text/javascript" src="http://tools.jb51.net/static/jsformat/jsbeautify.js"></script>

2、使用标签接收

<textarea style="height: 300px;min-width: 90%;padding: 10px;" id="targetData" placeholder="报文内容" class="layui-textarea"></textarea>

3、js编写

调用后台接口返回后调用此方法:

do_js_beautify(jQuery.parseJSON(result));
var tabchar = '';
function do_js_beautify(returnDate) {
    if (returnDate.length == 0)
        return;
    var tabsize = 4;
    tabchar = ' ';
    if (tabsize == 1)
        tabchar = '\t';
    var fjs = js_beautify(returnDate, tabsize, tabchar);
    $("#targetData").html(fjs);
    //调用文本域自适应
    autoTextAreaHeight($("#targetData")[0])
}

//文本域自适应
function autoTextAreaHeight(o) {
    o.style.height = 0;
    o.style.height = o.scrollTop + o.scrollHeight + 30 + "px";
}

效果图:

image-20211227172428826

4、完成

posted @ 2021-12-27 17:26  laughing的学习笔记  阅读(924)  评论(0)    收藏  举报