经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » JSON » 查看文章
基于jquery+html开发的json格式校验工具
来源：cnblogs　　作者：Java2048　　时间：2023/10/30 9:16:23　　对本文有异议

json简介

JSON是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。

json在线解析及格式化工具介绍

JSON格式化和JSON验证器工具帮助自动格式化JSON和验证您的JSON文本。它还提供了一个树视图,帮助导航格式化的JSON数据。

体验地址是：https://fktool.com/json/

源码分享

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <title>JSON在线解析 | JSON在线格式化校验工具</title>
  6.     <meta charset="utf-8" />
  7.     <meta name="viewport"
  8.         content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=yes" />
  9.     <meta name="applicable-device" content="pc,mobile" />
  10.     <meta name="keywords" content="json格式化, json在线解析, json校验" />
  11.     <meta name="description"
  12.         content="一个功能强大的在线 JSON 解析和格式化工具,提供JSON在线,json解析,json在线解析,JSON Formatter,json数组,JSON校验,格式化JSON,xml转json工具,在线json格式化工具,json格式化,json格式化工具,json字符串格式化,json在线,json在线验证,json在线校验" />
  14.     <!-- Google -->
  15.     <meta itemprop="name" content="json在线解析工具" />
  16.     <meta itemprop="description" content="一个功能强大的在线 JSON 解析和格式化工具..." />
  17.     <!-- Twitter -->
  18.     <meta name="twitter:card" content="summary_large_image" />
  19.     <meta name="twitter:title" content="json在线解析工具" />
  20.     <meta name="twitter:description" content="一个功能强大的在线 JSON 解析和格式化工具..." />
  22.     <meta name="renderer" content="webkit" />
  23.     <meta name="apple-mobile-web-app-capable" content="yes" />
  24.     <link rel="icon" type="image/png" href="/images/favicon_48x48.png">
  25.     <link rel="apple-touch-icon" sizes="114x114" href="/images/favicon_114x114.png">
  26.     <link rel="icon" href="/images/favicon.ico" type="image/x-icon" />
  27.     <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"
  28.         type="text/css" />
  29.     <link href="./static/style/tool.css" rel="stylesheet" type="text/css" />
  31. </head>
  33. <body>
  35.     <header class="hd-nav">
  36.         <a class="navbar-icon" href="/">
  37.             <img src="/images/icon_36x36.svg" width="32" height="32" alt="fktool在线工具网" />
  38.             <span class="navbar-label">FKTool.com</span>
  39.         </a>
  40.     </header>
  42.     <div class="main">
  43.         <div class="left">
  44.             <div class="row">
  45.                 <h1 style="font-size: 24px;margin: 16px 16px;color:#7952b3;">JSON在线格式化工具</h1>
  46.             </div>
  47.             <div class="row">
  48.                 <div class="banner">输入要解析的json文本并点击格式化按钮</div>
  49.             </div>
  50.             <div class="row">
  51.                 <div class="col-md-12 col10main">
  52.                     <div class="accordion" id="accordion2">
  53.                         <div class="accordion-group">
  54.                             <div class="panel panel-defaul">
  55.                                 <form id="form1" class="form-horizontal" method="post">
  56.                                     <div class="input-group mb5"><input class="form-control" type="text" id="txt_url"
  57.                                             placeholder="输入远程Json网址" /><span class="input-group-btn"><button
  58.                                                 class="btn btn-default" type="button"
  59.                                                 id="get_remote">远程获取Json</button></span></div>
  60.                                     <div class="form-group">
  61.                                         <div class="col-sm-12"><textarea id="content" name="content"
  62.                                                 class="form-control" rows="14"
  63.                                                 placeholder="请输入Json，Json格式化的时候要去除所有转义，转义存在可能导致Json校验不通过"></textarea>
  64.                                         </div>
  65.                                     </div>
  66.                                     <div class="form-group">
  67.                                         <div class="col-sm-12 text-center">
  69.                                             <input type="button" class="btn btn-success" name="validate" id="validate"
  70.                                                 value="Json格式化" />
  71.                                             <input type="button" class="btn btn-info" onclick="jsonzip(1);"
  72.                                                 value="Json压缩">
  73.                                             <span id="copyallcode" class="btn btn-default"
  74.                                                 data-clipboard-target="#content">复制</span>
  75.                                             <input type="button" class="btn btn-default" onclick="content.value=''"
  76.                                                 value="清空">
  77.                                         </div>
  78.                                     </div>
  79.                                     <div class="form-group">
  80.                                         <div class="col-sm-12">
  81.                                             <div class="alert alert-warning alert-dismissible text-left" role="alert"
  82.                                                 id="results"><span>请输入需要格式化的Json字符串</span></div>
  83.                                         </div>
  84.                                     </div>
  85.                                 </form>
  86.                             </div>
  87.                         </div>
  88.                         <div class="alert alert-info main-desc">
  89.                             <h2 class="f20">json在线解析及格式化工具介绍</h2>
  90.                             <p>
  91.                                 JSON格式化和JSON验证器工具帮助自动格式化JSON和验证您的JSON文本。它还提供了一个树视图,帮助导航格式化的JSON数据。它具有如下优点:
  92.                             </p>
  94.                             <ul>
  95.                                 <li>
  96.                                     它有助于通过错误消息在线验证JSON。
  97.                                 </li>
  98.                                 <li>
  99.                                     它是唯一的JSON工具，显示图像悬停在树视图中的图像URL。
  100.                                 </li>
  101.                                 <li>
  102.                                     它也是一个JSON美化器，支持缩进级别:2个空格，3个空格和4个空格。
  103.                                 </li>
  104.                                 <li>
  105.                                     支持打印JSON数据。
  106.                                 </li>
  107.                                 <li>
  108.                                     JSON文件格式化器提供了上传JSON文件和下载格式化JSON文件的功能。这个功能有助于格式化json文件。
  109.                                 </li>
  110.                                 <li>
  111.                                     95%的API使用JSON在客户端和服务器之间传输数据。这个工具可以作为API格式化器使用。
  112.                                 </li>
  113.                                 <li>
  114.                                     支持JSON字符串的JSON图形视图，作为JSON调试器或纠错器，可以格式化数组和对象。
  115.                                 </li>
  116.                                 <li>
  117.                                     在浏览器的本地存储中存储最后一个JSON格式的数据。这可以用作notepad++ / Sublime / VSCode JSON美化的替代方案。
  118.                                 </li>
  119.                                 <li>
  120.                                     这个JSON在线格式化器也可以作为JSON Lint工作。
  121.                                 </li>
  122.                                 <li>
  123.                                     使用自动开关打开或关闭自动更新进行美化。
  124.                                 </li>
  125.                                 <li>
  126.                                     它使用$。parseJSON和JSON。stringify美化JSON，以便于人类阅读和分析。
  127.                                 </li>
  128.                                 <li>
  129.                                     下载JSON，一旦它被创建或修改，它可以在notepad++， Sublime，或VSCode替代打开。
  130.                                 </li>
  131.                                 <li>
  132.                                     JSON格式检查器有助于修复缺失的引号，点击设置图标，看起来像一个螺丝刀在编辑器的左边来修复格式。
  133.                                 </li>
  134.                             </ul>
  136.                             <h2>JSON简介</h2>
  137.                             <p>
  138.                                 JSON是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard
  139.                                 ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C,
  140.                                 C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。
  141.                             </p>
  143.                             <h2>与其他格式的比较</h2>
  144.                             <h3>XML</h3>
  145.                             <p>
  146.                                 JSON与XML最大的不同在于XML是一个完整的标记语言，而JSON不是。这使得XML在程序判读上需要比较多的功夫。主要的原因在于XML的设计理念与JSON不同。XML利用标记语言的特性提供了绝佳的延展性（如XPath），在数据存储，扩展及高级检索方面具备对JSON的优势，而JSON则由于比XML更加小巧，以及浏览器的内置快速解析支持，使得其更适用于网络数据传输领域。
  147.                             </p>
  148.                             <h3>YAML</h3>
  149.                             <p>
  150.                                 在功能和语法上，JSON 都是 YAML 语言的一个子集。特别是，YAML
  151.                                 1.2规范指定“任何JSON格式的文件都是YAML格式的有效文件"。最常见的YAML解析器也能够处理JSON。版本 1.2 之前的 YAML 规范没有完全涵盖
  152.                                 JSON，主要是由于 YAML 中缺乏本机 UTF-32 支持，以及对逗号分隔空格的要求;此外，JSON 规范还包括 /* */ 样式的注释。YAML
  153.                                 最重要的区别是语法扩展集，它们在 JSON 中没有类似物：关系数据支持：在 YAML
  154.                                 文档中，可以引用以前在文件/流中找到的锚点;通过这种方式，您可以表达递归结构。支持除基元之外的可扩展数据类型，如字符串、数字、布尔值等。支持带缩进的块语法;它允许您在不使用不必要的符号的情况下描述结构化数据：各种括号、引号等。
  155.                             </p>
  156.                             <h3>MessagePack</h3>
  157.                             <p>
  158.                                 MessagePack比JSON更短小，快速。
  159.                             </p>
  160.                             <h3>格式化工具</h3>
  161.                             <p>
  162.                                 JSON格式取代了XML给网络传输带来了很大的便利，但是却没有了XML的一目了然，尤其是JSON数据很长的时候，会让人陷入繁琐复杂的数据节点查找中。开发者可以通过在线JSON格式化工具，来更方便的对JSON数据进行节点查找和解析。
  163.                             </p>
  165.                             <h2>参考资料:</h2>
  166.                             <ul>
  167.                                 <li>
  168.                                     <a href="https://zh.wikipedia.org/wiki/JSON">https://zh.wikipedia.org/wiki/JSON</a>
  169.                                 </li>
  170.                                 <li>
  171.                                     <a
  172.                                         href="https://zhuanlan.zhihu.com/p/33792109">https://zhuanlan.zhihu.com/p/33792109</a>
  173.                                 </li>
  174.                                 <li>
  175.                                     <a href="https://www.json.org/json-zh.html">https://www.json.org/json-zh.html</a>
  176.                                 </li>
  177.                                 <li>
  178.                                     <a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/JSON">https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/JSON</a>
  179.                                 </li>
  180.                             </ul>
  182.                         </div>
  183.                         <div class="accordion-group"></div>
  184.                     </div>
  185.                 </div>
  186.             </div>
  187.         </div>
  188.         <div class="right">
  189.             <div class="search">
  190.                 <input id="keyword" />
  191.                 <div class="search-btn">搜索</div>
  192.             </div>
  193.             <div class="recommend">
  194.                 <div class="recommend-head">相关推荐</div>
  195.                 <div class="recommend-list">
  196.                     <a class="recommend-list-item" href="https://ps.gitapp.cn">在线ps</a>
  197.                     <a class="recommend-list-item" href="https://fangdai.gitapp.cn">房贷计算器</a>
  198.                     <a class="recommend-list-item" href="https://ps.fktool.com">Online PS</a>
  199.                     <a class="recommend-list-item" href="https://base64.fktool.com">base64解码</a>
  200.                 </div>
  201.             </div>
  202.         </div>
  203.     </div>
  205.     <script src="./static/script/jquery-1.11.3.min.js" type="text/javascript"></script>
  206.     <script src="./static/script/bootstrap.min.js" type="text/javascript"></script>
  207.     <script src="./static/script/tool.js" type="text/javascript"></script>
  208.     <script src="./static/script/json/jsonformat.js" type="text/javascript"></script>
  209.     <script type="text/javascript">setJS(["./static/script/json/jsonzip.js"]);</script>
  210.     </div>
  213.     <div class="copyright" id="footer">
  214.         <div class="container">
  215.             <div class="row">
  216.                 <div class="col-sm-12">
  217.                     <span>
  218.                         Copyright ?2023
  219.                         <a href="/">
  220.                             fktool在线工具网
  221.                         </a>
  222.                     </span>
  223.                     |
  224.                     <span>
  225.                     </span>
  226.                 </div>
  227.             </div>
  228.         </div>
  229.     </div>
  231.     <script>
  232.     </script>
  234. </body>
  236. </html>

与其他格式比较

  • XML
    JSON与XML最大的不同在于XML是一个完整的标记语言，而JSON不是。这使得XML在程序判读上需要比较多的功夫。主要的原因在于XML的设计理念与JSON不同。XML利用标记语言的特性提供了绝佳的延展性（如XPath），在数据存储，扩展及高级检索方面具备对JSON的优势，而JSON则由于比XML更加小巧，以及浏览器的内置快速解析支持，使得其更适用于网络数据传输领域。

  • YAML
    在功能和语法上，JSON 都是 YAML 语言的一个子集。特别是，YAML 1.2规范指定“任何JSON格式的文件都是YAML格式的有效文件"。最常见的YAML解析器也能够处理JSON。版本 1.2 之前的 YAML 规范没有完全涵盖 JSON，主要是由于 YAML 中缺乏本机 UTF-32 支持，以及对逗号分隔空格的要求;此外，JSON 规范还包括 /* */ 样式的注释。YAML 最重要的区别是语法扩展集，它们在 JSON 中没有类似物：关系数据支持：在 YAML 文档中，可以引用以前在文件/流中找到的锚点;通过这种方式，您可以表达递归结构。支持除基元之外的可扩展数据类型，如字符串、数字、布尔值等。支持带缩进的块语法;它允许您在不使用不必要的符号的情况下描述结构化数据：各种括号、引号等。

  • MessagePack
    MessagePack比JSON更短小，快速。

总结

JSON格式取代了XML给网络传输带来了很大的便利，但是却没有了XML的一目了然，尤其是JSON数据很长的时候，会让人陷入繁琐复杂的数据节点查找中。开发者可以通过在线JSON格式化工具，来更方便的对JSON数据进行节点查找和解析。

原文链接：https://www.cnblogs.com/net19880504/p/17794327.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JSON热门文章

  • FastJson实现驼峰下划线相互转换方法详解
  • Cesium中的图形技术：Fabric —— 材质JSON规范
  • vue如何加载本地json数据
  • Json常用序列化工具包大比拼
  • fastjson 1.2.80 漏洞浅析及利用payload
  • Golang语言JSON解码函数Unmarshal的使用
  • [Linux] 解决CentOS下Requires: libjson-c.so错误
  • 解决layui的table插件无法多层级获取json数据的问题
  • C#使用Json.Net进行序列化和反序列化及定制化
  • golang如何修改json文件内容的方法示例

    • JSON推荐文章

  • 在.NET Web API设置响应输出Json数据格式常用的两种方式
  • 简单易懂的JSON框架
  • 安装、学习protobuf
  • 轻松上手Jackjson（珍藏版）
  • C# 中使对象序列化/反序列化 Json 支持使用派生类型以及泛型的方式
  • Asp .Net Core 系列：Asp .Net Core 集成 Newtonsoft.Json
  • 在 JMeter 中使用 JSON 提取器提取特定条件下的值
  • ASP.NET Core Web API设置响应输出的Json数据格式的两种方式
  • 基于jquery+html开发的json格式校验工具
  • 手把手教你写一个JSON在线解析的前端网站1

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号