Jsonview是目前最热门的一款开发者工具插件,确切的来说jQuery JSONView是一款非常实用的格式化和语法高亮JSON格式数据查看器jQuery插件。它是查看json数据的神器。

下载地址:http://www.cnplugins.com/devtool/jsonview/

常用的使用方法有:

1.在页面中引入jquery和jquery.jsonview.js,以及jquery.jsonview.css文件。

1
2
3
<link rel="stylesheet" href="dist/jquery.jsonview.css">
<script src="js/jquery.min.js"></script>
<script src="dist/jquery.jsonview.js"></script>   

2.关于如何设置JSONView语法高亮?

jQuery JSONView插件中的语法高亮是通过CSS来渲染不同数据类型的字符串,例如,可以在CSS中设置布尔型的数值为蓝色,字符串类型为绿色等等。jquery.jsonview.css文件中已经预设了各种高亮颜色,你可以根据实际情况自行修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
.jsonview .null {
    colorred;
}
.jsonview .bool {
  color#fde3a7;
}
.jsonview .num {
  color#bf55ec;
}
.jsonview .string {
  color#00b16a;
  white-space: pre-wrap;
}  

3.如何初始化jsonview插件?

在页面DOM元素加载完毕之后,可以通过JSONView()方法来初始化该插件。也可以在初始化时传入配置参数。

1
2
3
4
5
6
7
var json = {"hey""guy","anumber": 243,"anobject": {...},...};
 
$(function() {
  $("#json").JSONView(json);
  // with options
  $("#json-collasped").JSONView(json, { collapsed: true });
});   

4.如何配置jsonview参数?

jQuery JSONView插件可以使用以下一些配置参数。

  • collapsed:是否在第一次渲染时收缩所有的节点,默认值为:false。
  • nl2br:是否将一个新行转换为<br>字符串,默认值为false。
  • recursive_collapser:是否递归收缩节点,默认值为false。
  • escape:Escape HTML in key, default is true。

5.如何控制jsonview节点?

jQuery JSONView提供了以下的方法来控制JSON节点,所有的方法都接收一个level参数来在相应的节点上执行操作。

  • jQuery#JSONView('collapse', [level]):收缩节点。
  • jQuery#JSONView('expand', [level]):展开节点。
  • jQuery#JSONView('toggle', [level]):切换节点.
  • 6.复制请求地址-json的url,粘贴到浏览器的地址栏-》确认。结果如下图所示:

jsonview插件的常见使用方法整理的更多相关文章

  1. 【AS3】Flash与后台数据交换四种方法整理

    随着Flash Player 9的普及,AS3编程也越来越多了,所以这次重新整理AS3下几种与后台数据交换方法.1.URLLoader(URLStream)2.FlashRemoting3.XMLSo ...

  2. chrome jsonView插件安装

    chrome 应用商店打不开,想装插件愁死人了. 今天想到一个好方法,以 jsonView插件为例分享一下. 1.打开 https://github.com : 2.搜索 jsonView 链接:ht ...

  3. 【Chrome插件】去掉因使用jsonView插件的弹出窗口"请停用以开发者模式运行的扩展程序"

    前言 小编最近使用jsonView插件时,每次打开谷歌浏览器都会弹出下面的窗口,上网搜索,找到一个非常有效的方法. 解决方法 一.新建一个文本文档 二.复制代码 <# : @echo off c ...

  4. CSS常见布局问题整理

    实现div的水平居中和垂直居中 多元素水平居中 实现栅格化布局 1. 实现div的水平居中和垂直居中 实现效果: 这大概是最经典的一个题目了,所以放在第一个. 方法有好多, 一一列来 主要思路其实就是 ...

  5. JavaScript实现判断图片是否加载完成的3种方法整理

    JavaScript实现判断图片是否加载完成的3种方法整理 有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示 ...

  6. PHP 中使用ajax时一些常见错误总结整理

    这篇文章主要介绍了PHP 中使用ajax时一些常见错误总结整理的相关资料,需要的朋友可以参考下 PHP作为后端时,前端js使用ajax技术进行相互信息传送时,经常会出错误,对于新手来说有些手足无措.总 ...

  7. 获取客户端用户真实ip方法整理(jekyll迁移)

    layout: post title: 获取客户端用户真实ip方法整理 date: 2019-08-22 author: xiepl1997 tags: springboot 由请求获取客户端ip地址 ...

  8. Oracle之常见问题诊断方法

    Oracle认证:常见问题诊断方法如下: 1.TNS-12154 Error 或ORA-12154 特征:SQL*NET没有找到连接串或别名 原因1:(1)没有找到TNSNAMES.ORA文件,该文件 ...

  9. 100m和1000m网线的常见制作方法

    100m和1000m网线的常见制作方法 100m和1000m网线的常见制作方法: 5类线(100m)的制作: a: 绿白(3).绿(6).橙白(1).蓝(4).蓝白(5).橙(2).棕白(7).棕(8 ...

随机推荐

  1. 美国诚实签经验——我们准备了XX万的存款,这足以应付我预算表中涉及的所有开支,如果有意外情况我们的资金不足以应付,我们双方的父母也会支援我们,绝对不会占用美国的任何福利

    闲话少絮,直接分享本人诚实签的经验,希望对有此打算的朋友有帮助! 个人经验有限,经历仅供参考~~ 第一步:决定赴美生子. 第二步:选择诚实签. 第三步:填写DS160表格(网址https://ceac ...

  2. Windows Java环境变量配置

    安装步骤略过... 环境变量配置 新建环境变量: JAVA_HOME C:\Program Files\Java\jdk1.6 将路径替换为自己的安装路径.    新建环境变量: classpath ...

  3. A brief preview of the new features introduced by OpenGL 3.3 and 4.0

    A brief preview of the new features introduced by OpenGL 3.3 and 4.0   The Khronos Group continues t ...

  4. bzoj 1700: [Usaco2007 Jan]Problem Solving 解题【dp】

    很像贪心的dp啊 这个定金尾款的设定让我想起了lolita和jk制服的尾款地狱-- 设f[i][j]为从j到i的付定金的最早月份然后从f[k][j-1]转移来,两种转移f[i][j]=min(f[i] ...

  5. js 事件循环机制 EventLoop

    js 的非阻塞I/O  就是由事件循环机制实现的 众所周知  js是单线程的 也就是上一个任务完成后才能开始新的任务 那js碰到ajxa和定时器.promise这些异步任务怎么办那?这时候就出现了事件 ...

  6. xposed源码编译与集成

    xposed installer3.0版本之后,传统的xposed框架的使用方法是从官网上下载xposed installer.apk以及xposed-arm-sdk22.zip包.然后具体的使用方法 ...

  7. php insteadof 作用

    PHP5的另一个新成员是instdnceof关键字.使用这个关键字可以确定一个对象是类的实例.类的子类,还是实现了某个特定接口,并进行相应的操作.在某些情况下,我们希望确定某个类是否特定的类型,或者是 ...

  8. Linux环境下修改MySQL数据库存储引擎

    今天在执行Oracle数据库迁移至MySQL数据库时报出了一个错误信息: Specified key was too bytes 百度发现,原来需要更改MySQL数据库的存储引擎为InnoDB,查询目 ...

  9. [转]Paging, Searching and Sorting in ASP.Net MVC 5

    本文转自:http://www.c-sharpcorner.com/UploadFile/4b0136/perform-paging-searching-sorting-in-Asp-Net-mvc- ...

  10. C# 访问mongodb数据库

    1.引用四个mongodb动态库MongoDB.Bson.dll,MongoDB.Driver.Core.dll,MongoDB.Driver.dll,MongoDB.Driver.Legacy.dl ...