jQuery插件jsonview展示json数据
本文实例为大家分享了jQuery插件jsonview展示json数据的具体代码,供大家参考,具体内容如下
项目中要展示json数据,自己写一套html来展示太麻烦,可以使用jquery的插件jsonview来解决这个问题。
首先,去jquery官网下载最新的jsonview插件,放在js目录中,下载地址。
其次,在html中加入以下代码:
<div class="col-lg-6"> <section class="panel" style="height:600px"> <header class="panel-heading"> JSON数据 </header> <div class="panel-body" style="height:580px;overflow:auto"> <input type="hidden" name="json_data" id="json_data" value="{{ json_data }}"/> <button id="collapse-btn">折叠</button> <button id="expand-btn">展开</button> <button id="save-btn">保存</button> <div id="json"></div> </div> </section> </div>
然后,在js中增加js控制方法:
<script type="text/javascript"> var raw_json = $("#json_data").val(); var json = JSON.parse(raw_json); $(function() { $("#json").JSONView(json); $("#json-collapsed").JSONView(json, {collapsed: true, nl2br: true}); $('#collapse-btn').on('click', function() { $('#json').JSONView('collapse'); }); $('#expand-btn').on('click', function() { $('#json').JSONView('expand'); }); }); </script>
可以自动解析json给其加入html样式,并且jquery.jsonview.js也是使用jquery写的插件工具,可以根据自己需求修改。最终结果展示如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
jquery JSON的解析方式
这里考虑都考虑的是服务器返回的是JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里首先给出JSON字符串集,字符串集如下: 复制代码 代码如下: var data=" { root: [ {name:'1',value:'0'}, {name:'6101',value:'西安市'}, {name:'6102',value:'铜川市'}, {name:'6103',value:'宝鸡市'}, {name:'6104',valu
-
jquery eval解析JSON中的注意点介绍
在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的each方法来遍历 用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里首先给出JSON字符
-
JQuery遍历json数组的3种方法
一.使用each遍历 复制代码 代码如下: $(function () { var tbody = ""; //------------遍历对象 .each的使用------------- //对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式,必须保证JSON的格式要求,回调的对象必须使用eval函数进行转化(否则将得不到Object).本文不作详细介绍服务器端回调的数据问题,我们将直接自定义对象)
-
JQuery处理json与ajax返回JSON实例代码
一.JSON的一些基础知识. JSON中对象通过"{}"来标识,一个"{}"代表一个对象,如{"AreaId":"123"},对象的值是键值对的形式(key:value). "[]",标识数组,数组内部各个数据之间通过","分割,如["AreaId":"123","AreaId":"345"]. 很多情况下是
-
jQuery插件jsonview展示json数据
本文实例为大家分享了jQuery插件jsonview展示json数据的具体代码,供大家参考,具体内容如下 项目中要展示json数据,自己写一套html来展示太麻烦,可以使用jquery的插件jsonview来解决这个问题. 首先,去jquery官网下载最新的jsonview插件,放在js目录中,下载地址. 其次,在html中加入以下代码: <div class="col-lg-6"> <section class="panel" style=&qu
-
jQuery基于ajax操作json数据简单示例
本文实例讲述了jQuery基于ajax操作json数据的方法.分享给大家供大家参考,具体如下: jQuery Ajax 实例演示 jQuery Ajax 的三种格式,在与后台进行数据交互的时候可以是json格式也可以是xml格式,本人建议将数据转化成json格式. Xml与json的比较 1.可读性 JSON和XML的可读性可谓不相上下,一边是建议的语法,一边是规范的标签形式,很难分出胜负. 2.可扩展性 XML天生有很好的扩展性,JSON当然也有,没有什么是XML能扩展,JSON不能的. 3.
-
vue使用vue-json-viewer展示JSON数据的详细步骤
目录 1.下载 2.引入并全局注册 3.组件内使用 4.一点使用技巧.心得 5.修改编辑的样式,使其符合项目需求 总结 1.下载 npm下载: // Vue2 npm install vue-json-viewer@2 --save // Vue3 npm install vue-json-viewer@3 --save yarn下载: // Vue2 yarn add vue-json-viewer@2 // Vue3 yarn add vue-json-viewer@3 2.引入并全局注册
-
jQuery实现异步获取json数据的2种方式
本文实例讲述了jQuery实现异步获取json数据的2种方式,在web程序开发中非常具有实用价值.分享给大家供大家参考之用.具体方法如下: 通常来说,jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本文就来实现使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: { "one" : "Hello", "two" : "World" } 一
-
springMVC框架下JQuery传递并解析Json数据
json作为一种轻量级的数据交换格式,在前后台数据交换中占据着非常重要的地位.Json的语法非常简单,采用的是键值对表示形式. JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串,然后就可以在函数之间轻松地传递这个字符串,或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序,也可以从服务器端程序传递json格式的字符串给前端并由前端解释.这个字符串是符合json语法的,而json语法又是javascript语法的子集,所以javascript很容易解释它,而且
-
jQuery调用WebService返回JSON数据及参数设置注意问题
.NET Framework 3.5的发布解决了WebService调用中json问题,本文将介绍jQuery调用基于.NET Framework 3.5的WebService返回JSON数据,另外还要介绍一下用jQuery调用WebService的参数设置及设置不当所出现的问题,还有出现问题的原因 jQuery调用WebService网上的介绍也比较多,最近的项目中我也用到不少,一直都很少用.NET Ajax,比较钟情于jQuery调用请求WebService有几种方法,这主要说一下POST与
-
详谈 Jquery Ajax异步处理Json数据.
所谓的Ajax.这里我们讲二种方法 方法一:(微软有自带Ajax框架) 在Asp.net里微软有自己的Ajax框架.就是在页面后台.cs文件里引入 using System.Web.Services 空间 然后定义静态方法(方法前加上 [WebMethod]) [WebMethod] public static string ABC(string ABC) { return ABC; } 好了,现在我们谈谈前台Js怎么处理后台返回的数据吧,可利用Jquery处理返回的纯html,json,Xml
-
jQuery Ajax异步处理Json数据详解
先我们来看一个官方的实例使用 AJAX 请求来获得 JSON 数据,并输出结果: 复制代码 代码如下: $("button").click(function(){ $.getJSON("demo_ajax_json.js",function(result){ $.each(result, function(i, field){ $("div").append(field + " "); }); });
-
jQuery通过Ajax返回JSON数据
服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据. JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用.请接着往下看教程. <ul id="userlist"> <li><a hre
-
jquery教程ajax请求json数据示例
复制代码 代码如下: $.ajax({ url: '这个地址要换成你自己的', data: {S_CourseID: courseid , CurrTime : new Date().getTime()}, //加个时间戳,否则会不自动更新数据 dataType: 'json', success: function(data) { if (data != null) { if ( dat
随机推荐
- HTML中setCapture、releaseCapture 使用方法浅析
- 在WordPress中获取数据库字段内容和添加主题设置菜单
- Zend Framework框架路由机制代码分析
- PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
- JavaScript实现自动切换图片代码
- Python实现单词拼写检查
- pygame实现弹力球及其变速效果
- 获取到AdvancedDataGrid选中行的全部数据
- JS用斜率判断鼠标进入DIV四个方向的方法
- java Spring AOP详解及简单实例
- 使用JavaScript为一张图片设置备选路径的方法
- javascript伸缩菜单栏实现代码分享
- 用Flash图形化数据(一)
- thinkphp在低版本Nginx 下支持PATHINFO的方法分享
- VSCode 配置React Native开发环境的方法
- Python中的默认参数实例分析
- php实现在线考试系统【附源码】
- Redis和Lua实现分布式限流器的方法详解
- java实现图的邻接表存储结构的两种方式及实例应用详解
- 浅谈layui使用模板引擎动态渲染元素要注意的问题