JSON辅助格式化处理方法


Posted in Javascript onMarch 26, 2013

平时服务器端开发人员写好后台之后一般写一份简单的接口说明页面,类似:

<form action="test.php" accept-charset="utf-8"> 
<div><label for="">param_1</label><input type="text" name="param_1" value="value_1"/></div> 
<div><label for="">param_2</label><input type="text" name="param_2" value="value_2"/></div> 
<div><label for="">param_3</label><input type="text" name="param_3" value="value_3"/></div> 
<div><label for="">param_4</label><input type="text" name="param_4" value="value_4"/></div> 
<div><input type="submit" value="submit"/></div> 
</form>

由于结果是以json形式返回的,不容易一眼辨认,所以为了方便,对结果进行了简单的处理:
1,由于不能控制返回结果的页面,所以直接对请求进行了拦截并用ajax方式进行重发。
2,格式化返回的json结果,非json结果直接显示。
注:ubuntu下的chromium在处理overflow的问题上貌似有点不一样,所以结果容器写得有点罗嗦。
具体例子:
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
</head> 
<body> 
<div id="page"> 
<form action="test.php" accept-charset="utf-8"> 
<div><label for="">param_1</label><input type="text" name="param_1" value="value_1"/></div> 
<div><label for="">param_2</label><input type="text" name="param_2" value="value_2"/></div> 
<div><label for="">param_3</label><input type="text" name="param_3" value="value_3"/></div> 
<div><label for="">param_4</label><input type="text" name="param_4" value="value_4"/></div> 
<div><input type="submit" value="submit"/></div> 
</form> 
</div> 
<script type="text/javascript" src="../js/jQuery.js"></script> 
<script type="text/javascript" src="../js/JSONFormat.js"></script> 
</body> 
</html>

结果:
JSON辅助格式化处理方法
JSONFormat.js内容:
View Code 
var JSONFormat = (function(){ 
var _toString = Object.prototype.toString; 
function format(object, indent_count){ 
var html_fragment = ''; 
switch(_typeof(object)){ 
case 'Null' :0 
html_fragment = _format_null(object); 
break; 
case 'Boolean' : 
html_fragment = _format_boolean(object); 
break; 
case 'Number' : 
html_fragment = _format_number(object); 
break; 
case 'String' : 
html_fragment = _format_string(object); 
break; 
case 'Array' : 
html_fragment = _format_array(object, indent_count); 
break; 
case 'Object' : 
html_fragment = _format_object(object, indent_count); 
break; 
} 
return html_fragment; 
}; 
function _format_null(object){ 
return '<span class="json_null">null</span>'; 
} 
function _format_boolean(object){ 
return '<span class="json_boolean">' + object + '</span>'; 
} 
function _format_number(object){ 
return '<span class="json_number">' + object + '</span>'; 
} 
function _format_string(object){ 
if(0 <= object.search(/^http/)){ 
object = '<a href="' + object + '" target="_blank" class="json_link">' + object + '</a>' 
} 
return '<span class="json_string">"' + object + '"</span>'; 
} 
function _format_array(object, indent_count){ 
var tmp_array = []; 
for(var i = 0, size = object.length; i < size; ++i){ 
tmp_array.push(indent_tab(indent_count) + format(object[i], indent_count + 1)); 
} 
return '[\n' 
+ tmp_array.join(',\n') 
+ '\n' + indent_tab(indent_count - 1) + ']'; 
} 
function _format_object(object, indent_count){ 
var tmp_array = []; 
for(var key in object){ 
tmp_array.push( indent_tab(indent_count) + '<span class="json_key">"' + key + '"</span>:' + format(object[key], indent_count + 1)); 
} 
return '{\n' 
+ tmp_array.join(',\n') 
+ '\n' + indent_tab(indent_count - 1) + '}'; 
} 
function indent_tab(indent_count){ 
return (new Array(indent_count + 1)).join(' '); 
} 
function _typeof(object){ 
var tf = typeof object, 
ts = _toString.call(object); 
return null === object ? 'Null' : 
'undefined' == tf ? 'Undefined' : 
'boolean' == tf ? 'Boolean' : 
'number' == tf ? 'Number' : 
'string' == tf ? 'String' : 
'[object Function]' == ts ? 'Function' : 
'[object Array]' == ts ? 'Array' : 
'[object Date]' == ts ? 'Date' : 'Object'; 
}; 
function loadCssString(){ 
var style = document.createElement('style'); 
style.type = 'text/css'; 
var code = Array.prototype.slice.apply(arguments).join(''); 
try{ 
style.appendChild(document.createTextNode(code)); 
}catch(ex){ 
style.styleSheet.cssText = code; 
} 
document.getElementsByTagName('head')[0].appendChild(style); 
} 
loadCssString( 
'.json_key{ color: purple;}', 
'.json_null{color: red;}', 
'.json_string{ color: #077;}', 
'.json_link{ color: #717171;}', 
'.json_array_brackets{}'); 
var _JSONFormat = function(origin_data){ 
this.data = 'string' != typeof origin_data ? origin_data : 
JSON && JSON.parse ? JSON.parse(origin_data) : eval('(' + origin_data + ')'); 
}; 
_JSONFormat.prototype = { 
constructor : JSONFormat, 
toString : function(){ 
return format(this.data, 1); 
} 
} 
return _JSONFormat; 
})(); 
function create_result_contatiner(){ 
var $result = $('<pre id="result" style=" width: 100%; height: 100%; overflow: scroll; overflow-x: scroll; overflow-y:scroll"></pre>') 
var $result_container = $('<div id="result_container" style="position: fixed; top: 1%; right: 8px; width: 5%; height: 97%; margin: 0; padding: 0; border:1px solid skyblue; background: #f8f8f8; line-height: 1.2em; font-size: 14px; cursor: pointer;"></div>'); 
$result_container.append($result); 
$result_container.hover(function(){ 
$(this).stop(true).animate({width:'50%'}, 'slow'); 
}, function(){ 
$(this).stop(true).animate({width:'5%'}, 'slow'); 
}); 
$('body').append($result_container); 
return [$result_container, $result]; 
} 
(function request_intercept(args){ 
var $result_container = args[0], 
$result = args[1]; 
$('form *[type="submit"]').bind('click', function(){ 
var _form = $(this).parents('form'), 
_action = (_form.attr('action') || './'), 
_method = (_form.attr('method') || 'get').toLowerCase(), 
_params = {}; 
_form.find('input[type="text"]').each(function(){ 
var item = $(this); 
_params[item.attr('name')] = item.val(); 
}); 
$['get' == _method ? 'get' : 'post'](_action, _params, function(response){ 
try{ 
var j = new JSONFormat(JSON && JSON.parse ? JSON.parse(response) : eval('(' + response + ')')); 
$result.html(j.toString()); 
}catch (e){ 
$result.html($result.text(response).html()); 
} 
$result_container.stop(true).animate({width:'50%'}, 'slow'); 
}); 
return false; 
}); 
})(create_result_contatiner());
Javascript 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
javascript实现信息增删改查的方法
Jul 25 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
javascript html5轻松实现拖动功能
Mar 01 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 #Javascript
jquery图片放大镜功能的实例代码
Mar 26 #Javascript
EditPlus注册码生成器(js代码实现)
Mar 25 #Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
Mar 25 #Javascript
JS上传前预览图片实例
Mar 25 #Javascript
js实现杯子倒水问题自动求解程序
Mar 25 #Javascript
js实现上传图片之上传前预览图片
Mar 25 #Javascript
You might like
PHP_Flame(Version:Progress)的原代码
2006/10/09 PHP
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
Python实现求一个集合所有子集的示例
2018/05/04 Python
python按照多个条件排序的方法
2019/02/08 Python
python和c语言的主要区别总结
2019/07/07 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
Python Django view 两种return的实现方式
2020/03/16 Python
基于Python绘制个人足迹地图
2020/06/01 Python
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
长安大学毕业生自我鉴定
2014/01/17 职场文书
python实现自动化群控的步骤
2021/04/11 Python
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技