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 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
Display SQL Server Login Mode
Jun 21 Javascript
js null undefined 空区别说明
Jun 13 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
Apr 11 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 Javascript
在vue中使用image-webpack-loader实例
Nov 12 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下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
PHP函数常用用法小结
2010/02/08 PHP
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
微信支付开发维权通知实例
2016/07/12 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
python实现复制整个目录的方法
2015/05/12 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
python实现两个文件夹的同步
2019/08/29 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
python使用列表的最佳方案
2020/08/12 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
节能环保家庭事迹材料
2014/08/27 职场文书
故意伤害辩护词
2015/05/21 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
党小组推荐意见
2015/06/02 职场文书
解析redis hash应用场景和常用命令
2021/08/04 Redis