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 相关文章推荐
如何用javascript判断录入的日期是否合法
Jan 08 Javascript
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
详解javascript数组去重问题
Nov 06 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 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文件上传(实例)
2013/10/27 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
介绍Ibatis的核心类
2013/11/18 面试题
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
个人自我评价和职业目标
2014/01/24 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
司考复习计划
2015/01/19 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
消防安全主题班会
2015/08/12 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers