格式化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 ...
随机推荐
- 【Unity3D】Unity3D开发《我的世界》之三、创建一个Chunk
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/unity_minecraft_03.html 一.引入int类型的Vector3 我们都知道Unity3D里Vec ...
- 关于编译FFMPEG的初级教程
首先我们要下载相关工具,这里不多说,大家按照我的地址去下载文件就好了 MINGW下载地址:http://prdownloads.sourceforge.net/mingw/MinGW-3.1.0-1. ...
- sdl的缩放问题
SDL是一种既是开源的,也是跨平台的多媒体开发包,在各种平台上应用很广,经常和FFMPEG等解码器同时使用.对于在windows mobile等缺乏通用播放器的平台来说,是一种很好的选择.网上很多代码 ...
- R语言︱基本函数、统计量、常用操作函数
先言:R语言常用界面操作 帮助:help(nnet) = ?nnet =??nnet 清除命令框中所有显示内容:Ctrl+L 清除R空间中内存变量:rm(list=ls()).gc() 获取或者设置当 ...
- iOS - Swift Enumerations or how to annoy Tom
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
- Windows系统还原失败心得
最近我的Windows10连续几天出现了蓝屏,怀疑是某软件的Bug造成的,于是想用系统还原功能回到前一段时间,我找到了那款软件安装的时间. 到了选择还原点界面,发现有5个还原点,最旧的一个刚好就是那款 ...
- Java百度地图经纬度纠偏
在国内使用电子地图获取到的经纬度都不是真实的经纬度,而是经过一定的算法在真实的经纬度上添加了一个偏移量,且不同的地图有不同的算法.现在告诉大家在java中怎样对百度地图进行纠偏,主要实现将真实的经纬度 ...
- Struts2如何实现MVC，与Spring MVC有什么不同？
Struts2采用filter充当前端控制器处理请求,filter会根据Struts.xml的配置,将请求分发给不同的业务控制器Action,再由Action处理具体的业务逻辑.Action处理完业务 ...
- 消息中间件kafka+zookeeper集群部署、测试与应用
业务系统中,通常会遇到这些场景:A系统向B系统主动推送一个处理请求:A系统向B系统发送一个业务处理请求,因为某些原因(断电.宕机..),B业务系统挂机了,A系统发起的请求处理失败:前端应用并发量过大, ...
- 配置Tomcat线程参数maxThreads、acceptCount
一.配置Tomcat/conf/server.xml修改配置 <Connector port="8080" protocol="org.apache.coyote. ...