`
knight_black_bob
  • 浏览: 851278 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

json 前段页面展示 格式化 排版

阅读更多

 

 

 

 

function ajaxPost() {
    $.ajax({
    	url: '${ctx}/json/request.do', 
        type: 'POST',
        success: function (result) { 
             console.log(result)
             var html = formatJson(JSON.stringify(result)); 
             console.log(html);
             $('#show_json').empty();
             $('#show_json').html('<pre class="layui-code">' +html+'</pre>');
          
        }
    })
}
  
 
 

function formatJson(json) {
    var i = 0,
            len = 0,
            tab = "    ",
            targetJson = "",
            indentLevel = 0,
            inString = false,
            currentChar = null;


    for (i = 0, len = json.length; i < len; i += 1) {
        currentChar = json.charAt(i);

        switch (currentChar) {
            case '{':
            case '[':
                if (!inString) {
                    targetJson += currentChar + "\n" + repeat(tab, indentLevel + 1);
                    indentLevel += 1;
                } else {
                    targetJson += currentChar;
                }
                break;
            case '}':
            case ']':
                if (!inString) {
                    indentLevel -= 1;
                    targetJson += "\n" + repeat(tab, indentLevel) + currentChar;
                } else {
                    targetJson += currentChar;
                }
                break;
            case ',':
                if (!inString) {
                    targetJson += ",\n" + repeat(tab, indentLevel);
                } else {
                    targetJson += currentChar;
                }
                break;
            case ':':
                if (!inString) {
                    targetJson += ": ";
                } else {
                    targetJson += currentChar;
                }
                break;
            case ' ':
            case "\n":
            case "\t":
                if (inString) {
                    targetJson += currentChar;
                }
                break;
            case '"':
                if (i > 0 && json.charAt(i - 1) !== '\\') {
                    inString = !inString;
                }
                targetJson += currentChar;
                break;
            default:
                targetJson += currentChar;
                break;
        }
    }
    return targetJson;
}

function repeat(s, count) {
    return new Array(count + 1).join(s);
}

 

 

 

 

 

 

 

 

 

 

 

 

 

捐助开发者 

在兴趣的驱动下,写一个免费的东西,有欣喜,也还有汗水,希望你喜欢我的作品,同时也能支持一下。 当然,有钱捧个钱场(支持支付宝和微信 以及扣扣群),没钱捧个人场,谢谢各位。

 

个人主页http://knight-black-bob.iteye.com/



 
 
 谢谢您的赞助,我会做的更好!

0
0
分享到:
评论

相关推荐

    json数据在Html页面格式化显示

    在描述中提到的“采用光标事件格式化展示”,意味着在页面上,当用户通过鼠标光标选中或点击某部分JSON数据时,会以某种方式(如高亮、折叠展开等)进行格式化显示,以便于查看和对比接口文档。 要实现这样的功能,...

    json格式化工具win版

    使用JSON格式化工具时,用户通常需要将未格式化的JSON字符串粘贴到工具的输入区域,然后点击“格式化”或“美化”按钮,软件会自动将字符串转换为清晰的格式。此外,一些高级工具还可能支持批量处理,即一次可以处理...

    flask bootstrap页面json格式化

    本篇文章将深入探讨如何在Flask应用中结合Bootstrap来展示和格式化JSON数据。 首先,确保已安装了Flask、Bootstrap和相关的依赖。可以使用以下命令安装: ```bash pip install flask flask-bootstrap ``` 接下来...

    Json离线格式化工具

    在开发中,如果用到Json传递或者存储数据,Newtonsoft.Json序列化后的内容很难阅读,Json格式化(树状结构)工具由此诞生。压缩包中包含一个美化工具(exe)、C# net 3.5的格式化dll和一个简单的demo文件(exe工具...

    Json和Xml离线格式化工具

    在IT行业中,数据交换和存储经常涉及两种常见的数据序列化格式:JSON(JavaScript Object Notation)和XML(eXtensible Markup Language)。JSON以其简洁、易读性而被广泛用于Web服务,而XML则因其丰富的结构和强大...

    离线json格式化查看工具下载

    1. **格式化**:当JSON数据以紧凑的形式(单行无缩进)存在时,格式化工具可以帮助我们将这些数据转换成清晰易读的多行格式,通过增加缩进来提高可读性。在描述中提到,只需复制粘贴JSON数据到工具中,点击“Format...

    前端展示json数据,格式化,可折叠展开

    本主题将详细介绍如何在前端实现JSON数据的格式化展示,以及支持折叠和展开的功能。 首先,理解JSON的基本结构是至关重要的。JSON由键值对组成,键必须是字符串,用双引号包围,而值可以是各种类型,如字符串、数字...

    json数据格式化(editplus 格式化 Json 工具 )

    在开发过程中,除了EditPlus,还有其他很多工具可以用来格式化JSON数据,比如在线的JSON校验和格式化工具(如JSONLint)、IDE内置的格式化功能(如Visual Studio Code、IntelliJ IDEA等),以及命令行工具(如jq)。...

    Json 格式化工具

    而"JSON格式化_files"文件夹则可能包含了页面运行所需的CSS样式表、JavaScript脚本和其他相关资源。这些资源共同协作,使得用户可以在本地环境中方便地进行JSON数据的格式化操作,而无需依赖任何在线服务。 使用...

    JSON格式化工具-JSON格式化美化工具

    7. **API测试**:部分工具集成了API接口调用功能,允许用户直接输入API URL,获取返回的JSON数据并进行格式化展示。 描述中提到的资源包括HTML网页文件和JavaScript文件,这意味着这是一个基于浏览器的JSON格式化...

    json离线格式化工具

    在处理大量JSON数据时,为了便于理解和调试,我们通常会需要使用JSON格式化工具。 "json离线格式化工具"是一款专为处理JSON数据设计的实用工具,它允许用户在没有网络连接的情况下对JSON数据进行美化和解析。这个...

    JSON格式化和编辑工具

    JSON格式化工具正是为此目的而设计的,它们可以将原始的、难以阅读的JSON字符串转换成层次分明、易于理解的树形结构,同时支持编辑和验证JSON数据。 "HiJson 2.1.2_jdk64.exe" 是一个JSON格式化和编辑工具的程序...

    Json格式化工具

    在开发过程中,特别是涉及到前后端交互时,JSON格式化工具如HiJson能够帮助开发者快速定位问题,例如检查错误的键值对、验证JSON结构是否符合规范,或是找出导致程序异常的特定部分。这不仅提高了工作效率,也减少了...

    离线json格式化工具

    离线JSON格式化工具是针对JSON数据进行查看、编辑和美化的一种桌面应用程序,尤其适用于那些没有网络连接或者需要在本地处理大量JSON数据的情况。 标题中的“离线json格式化工具”是指这样一款软件,它可以让你在...

    好用的本地json格式化小工具,无需联网

    标题提到的“好用的本地json格式化小工具”是针对这一需求而设计的,它允许用户在离线环境下对JSON数据进行美化,使其更易读。这类工具通常具有以下功能: 1. **格式化**:将紧凑的JSON字符串转换为带有缩进和换行...

    Json字符串美化格式化软件

    这就引出了我们今天的主题——“Json字符串美化格式化软件”。 该软件的主要功能就是帮助开发者将杂乱无章的JSON字符串转换成整齐、有序的格式,便于理解和调试。它通常具有以下特性: 1. **自动缩进**:软件会...

    Editplus设置json格式化和xml格式化

    而对于XML,格式化后可以清晰地展示元素层级关系,方便查找和修改元素属性。因此,学会在EditPlus中设置这些格式化工具是非常实用的技能。 在使用过程中,你可能需要注意一些细节,例如设置合适的缩进字符(空格或...

    Json字符串自动格式化

    自动格式化json字符串自动格式化json字符串自动格式化json字符串

    Editplus设置json格式化

    下面我们将详细介绍如何在EditPlus中设置JSON、JavaScript和CSS的格式化。** ### JSON格式化设置 在EditPlus中,你可以通过以下步骤来设置JSON的格式化: 1. 打开`EditPlus`,点击菜单栏上的`首选项`...

    json格式化工具

    JSON格式化工具是用来帮助开发者将混乱的JSON字符串整理成易读的格式,这对于调试、分析或检查JSON数据非常有用。这类工具通常具有以下功能: 1. **美化输出**:将一串未经格式化的JSON文本,通过添加缩进和换行,...

Global site tag (gtag.js) - Google Analytics