格式化JSON数据
function formatJson(json, options) {
var reg = null,
formatted = '',
pad = 0,
PADDING = ' ';
options = options || {};
options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;
if (typeof json !== 'string') {
json = JSON.stringify(json);
} else {
json = JSON.parse(json);
json = JSON.stringify(json);
}
reg = /([\{\}])/g;
json = json.replace(reg, '\r\n$1\r\n');
reg = /([\[\]])/g;
json = json.replace(reg, '\r\n$1\r\n');
reg = /(\,)/g;
json = json.replace(reg, '$1\r\n');
reg = /(\r\n\r\n)/g;
json = json.replace(reg, '\r\n');
reg = /\r\n\,/g;
json = json.replace(reg, ',');
if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
reg = /\:\r\n\{/g;
json = json.replace(reg, ':{');
reg = /\:\r\n\[/g;
json = json.replace(reg, ':[');
}
if (options.spaceAfterColon) {
reg = /\:/g;
json = json.replace(reg, ':');
}
(json.split('\r\n')).forEach(function(node, index) {
var i = 0,
indent = 0,
padding = '';
if (node.match(/\{$/) || node.match(/\[$/)) {
indent = 1;
} else if (node.match(/\}/) || node.match(/\]/)) {
if (pad !== 0) {
pad -= 1;
}
} else {
indent = 0;
}
for (i = 0; i < pad; i++) {
padding += PADDING;
}
formatted += padding + node + '\r\n';
pad += indent;
});
return formatted;
};
这个方法是在网上搜索到的一段代码，是用来把后台的页面不可读的JSON数据拼装成页面可读的JSON格式。这个方法在实际项目中可能用处不是很大，之前我使用到的场景是在做前后台对接时使用到的，因为开发的时候前端和后端是两个开发团队。所以接口测试和对接是时分有必要的，在这个时候这个把页面不可读的JSON数据转成可读的JSON就很有必要了。下面是前后端接口测试页面的具体实现。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>接口测试</title>
<link rel="stylesheet" href="http://www.fangxiangxiaopangpang.cn/lib/layui/build/css/layui.css">
<style lang="">
body {
background-attachment: fixed;
background-image: url('http://www.fangxiangxiaopangpang.cn/lib/images/pic01.jpg');
background-position: center bottom;
background-size: 100% auto;
} .login {
position: fixed;
top: 50%;
left: 50%;
background-color: rgba(0, 0, 0, 0.4);
width: 700px;
transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
border-radius: 10px;
text-align: center;
} .login h1 {
font-size: 30px;
line-height: 40px;
margin-top: 30px;
color: #fff;
padding-left: 22px;
} .login .layui-form-item {
/* display: inline-block; */
margin: 20px ;
} .login .layui-form-pane .layui-form-label {
width: 110px;
padding: 8px 15px;
height: 38px;
line-height: 20px;
border: 1px solid #e6e6e6;
border-radius: 2px 0 0 2px;
text-align: center;
background-color: #FBFBFB;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-box-sizing: border-box!important;
-moz-box-sizing: border-box!important;
box-sizing: border-box!important;
} .content{
display:none;
} pre{
text-align:left;
max-height:300px;
overflow:auto;
}
.fileinput{
line-height: 40px;
margin-left: 50px;
color: white;
}
.filename{
display: none;
}
</style>
</head> <body>
<div class="login">
<h1>接口测试</h1>
<form action='#' id = 'test_form' class="layui-form">
<div class="layui-form-item layui-form-pane">
<label class="layui-form-label">传输方式</label>
<div class="layui-input-block" style='color:white'>
<input type="radio" name="type" value="post" title="post" class='type'>
<input type="radio" name="type" value="get" title="get" checked class='type'>
</div>
</div>
<div class="layui-form-item layui-form-pane">
<label class="layui-form-label">接口地址</label>
<div class="layui-input-block">
<input id='address' type="text" name="address" placeholder="请输入接口地址" autofocus class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-pane">
<label class="layui-form-label">参数</label>
<div class="layui-input-block">
<input id='parmas' type="text" name="parmas" placeholder="请输入json格式的参数" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-pane">
<label class="layui-form-label">上传文件</label>
<div class="layui-input-block">
<input type="file" class='fileinput' id='fileinput'>
</div>
</div>
<div class="layui-form-item layui-form-pane filename">
<label class="layui-form-label">name值</label>
<div class="layui-input-block">
<input id='filename' type="text"placeholder="请输入文件name的属性值" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-pane content" >
<pre id='backdata'>
</pre>
</div>
<div class="layui-form-item layui-form-pane">
<span class="layui-btn" id='submit'>获取结果</span>
</div>
</form>
</div>
<script src='http://www.fangxiangxiaopangpang.cn/lib/jquery/jquery.min.js'></script>
<script src='http://www.fangxiangxiaopangpang.cn/lib/layui/build/lay/dest/layui.all.js'></script>
<script>
var type = 'get';
$('.layui-form-radio').on("click",function(){
type = $(this).prev('input').val();
});
$('#fileinput').on('change',function(){
$('.filename').show();
})
$('#submit').on("click",function(){
if(!!$("#fileinput")[0].files[0]){
if($('#filename').val()==''){
layer.msg('请输入文件的name值');
return false;
}
var formdata = new FormData();
formdata.append($("#filename").val(), $("#fileinput")[0].files[0]);
if($('#parmas').val().trim() != ''){
try{
var msg = JSON.parse($('#parmas').val().trim());
}catch(e){
layer.msg('请输入标准的JSON格式数据，例如{"a":"1","b":"2"}');
return false;
}
if(msg){
for(var key in msg){
formdata.append(key,msg[key]);
}
}
}
if($('#address').val()==''){
layer.msg('请输入接口地址');
return false;
}
var url = $('#address').val();
if(url.indexOf('http://')==-1){
url = 'http://'+url;
}
$.ajax({
type : type,
url : url,
data: formdata,
cache: false,
processData: false,
contentType: false,
success:function(data){
console.log(data);
$(".content").show();
$('#backdata').html(formatJson(data));
},
error:function(data){
layer.msg('获取数据失败');
}
});
}else{
if($('#address').val()==''){
layer.msg('请输入接口地址');
return false;
}
var data = {};
if($('#parmas').val().trim() != ''){
try{
var msg = JSON.parse($('#parmas').val().trim());
}catch(e){
layer.msg('请输入标准的JSON格式数据，例如{"a":"1","b":"2"}');
return false;
}
if(msg){
for(var key in msg){
data[key] = msg[key];
}
}
}
var url = $('#address').val();
if(url.indexOf('http://')==-1){
url = 'http://'+url;
}
$.ajax({
type : type,
url : url,
data: data,
success:function(data){
// console.log(data);
$(".content").show();
$('#backdata').html(formatJson(data));
},
error:function(data){
layer.msg('获取数据失败');
}
});
}
return false;
});
function formatJson(json, options) {
var reg = null,
formatted = '',
pad = 0,
PADDING = ' ';
options = options || {};
options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;
if (typeof json !== 'string') {
json = JSON.stringify(json);
} else {
json = JSON.parse(json);
json = JSON.stringify(json);
}
reg = /([\{\}])/g;
json = json.replace(reg, '\r\n$1\r\n');
reg = /([\[\]])/g;
json = json.replace(reg, '\r\n$1\r\n');
reg = /(\,)/g;
json = json.replace(reg, '$1\r\n');
reg = /(\r\n\r\n)/g;
json = json.replace(reg, '\r\n');
reg = /\r\n\,/g;
json = json.replace(reg, ',');
if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
reg = /\:\r\n\{/g;
json = json.replace(reg, ':{');
reg = /\:\r\n\[/g;
json = json.replace(reg, ':[');
}
if (options.spaceAfterColon) {
reg = /\:/g;
json = json.replace(reg, ':');
}
(json.split('\r\n')).forEach(function(node, index) {
var i = 0,
indent = 0,
padding = '';
if (node.match(/\{$/) || node.match(/\[$/)) {
indent = 1;
} else if (node.match(/\}/) || node.match(/\]/)) {
if (pad !== 0) {
pad -= 1;
}
} else {
indent = 0;
}
for (i = 0; i < pad; i++) {
padding += PADDING;
}
formatted += padding + node + '\r\n';
pad += indent;
});
return formatted;
};
</script>
</body>
</html>
格式化JSON数据的更多相关文章
- vim调用python格式化json数据
vim调用python格式化json数据 November 30, 2013GNU/Linuxpython3, Vimopenwares python有个标准模块叫json,用于编码/解码,序列化/按 ...
- js格式化JSON数据
前言: 最近做的项目中遇到个需要在前端页面中将某个设备需要的数据格式展示出来,方便用户配置.一开始单纯的将数据格式写入到pre标签中, 但是通过pre标签写入的数据格式在代码可视化上不是很优雅.由于上 ...
- PHP自定义函数格式化json数据怎么调用？
<?php/*** Formats a JSON string for pretty printing** @param string $json The JSON to make pretty ...
- 在JAVA中把JSON数据格式化输出到控制台
public class ForMatJSONStr { public static void main(String[] args) { String jsonStr = "{\" ...
- linux下格式化json文件数据
一.使用 python -m json.tool cat test.json | python -m json.tool 二.jq格式化 在web 2.0时代json这种直观.灵活.高效数据格式基本已 ...
- yformater - chrome谷歌浏览器json格式化json高亮json解析插件
yformater是一款chrome浏览器插件,用来格式化(高亮)服务端接口返回的json数据. 实际上小菜并不是第一个写这种插件的,但是现有的chrome json格式化插件实在是不太好用,索性小菜 ...
- Android网络请求与数据解析，使用Gson和GsonFormat解析复杂Json数据
版权声明:未经博主允许不得转载 一:简介 [达叔有道]软件技术人员,时代作者,从 Android 到全栈之路,我相信你也可以!阅读他的文章,会上瘾!You and me, we are family ...
- 【VueJS】VueJS开发请求本地json数据的配置
VueJS开发请求本地json数据的配置,旧版本是build/dev-server.js,新版本是build/webpack.dev.conf.js. VueJS开发请求本地json数据的配置,早期的 ...
- vue 导出JSON数据为Excel
1. 安装三个依赖 npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev ...
随机推荐
- python导入模块
1.模块的定义: 模块定义:用来逻辑上组织python代码(变量.函数.类.逻辑:目的是:实现一个功能),本质就是.py结尾的python文件. 补充: 包的定义:用来从逻辑组织模块的,本质就是一个目 ...
- redis分布式锁的几种实现方式，以及Redisson的配置和使用
最近在开发中涉及到了多个客户端的对redis的某个key同时进行增删的问题.这里就会涉及一个问题:锁 先举例在分布式系统中不加锁会出现问题: redis中存放了某个用户的账户余额 ,例如100 (用户 ...
- 【前端】用百度BAE和express部署自己的node后台
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/node_bae.html 百度有一个应用引擎,价格非常便宜,Java的tomcat每天4毛钱,node每天2毛钱, ...
- javascript 事件基础
一:事件流 事件流描述的是从页面中接收事件的顺序. 事件冒泡 <div id="one"> <div id="two"> <di ...
- sparklyr包：实现Spark与R的接口+sparklyr 0.5
本文转载于雪晴数据网 相关内容: sparklyr包:实现Spark与R的接口,会用dplyr就能玩Spark Sparklyr与Docker的推荐系统实战 R语言︱H2o深度学习的一些R语言实践-- ...
- u盘安装ubuntu10.04 、11.04 server
10.04 先将 ubuntu server 的 iso 放到优盘上,然后在提示无法找到光驱时,按 alt+f2 打开一个新的 console 窗口,将 iso mount 上,具体操作如下: ls ...
- MFC 多线程及线程同步
一.MFC对多线程编程的支持 MFC中有两类线程,分别称之为工作者线程和用户界面线程.二者的主要区别在于工作者线程没有消息循环,而用户界面线程有自己的消息队列和消息循环. 工作者线程没有消息机制,通常 ...
- dojo中引入FusionCharts柱状图报错
1.今天,做项目的过程中,我发现Java后台查询的数据都是正确的,并且拼接成JSON格式也正确,但是传到JSP页面时,图无法显示出来还报错,后来经过检查发现是JavaScript和引入FusionCh ...
- jquery Dialog弹框插件使用
var dialog = new Dialog({ title: '购物车', type: 'url', width: 520, content: "Uplolo.aspx", s ...
- Django学习-3-请求流程
Django请求生命周期 -> URL对应关系(匹配) -> 视图函数 -> 返回用户字符串 -> URL对应关系(匹配) -> 视图函数 -> 打 ...