JSONFormat.js内容:
Heim > Web-Frontend > js-Tutorial > JSON辅助格式化处理方法_json

JSON辅助格式化处理方法_json

WBOY
Freigeben: 2016-05-16 17:39:23
Original
1147 Leute haben es durchsucht

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

复制代码 代码如下:









由于结果是以json形式返回的,不容易一眼辨认,所以为了方便,对结果进行了简单的处理:
1,由于不能控制返回结果的页面,所以直接对请求进行了拦截并用ajax方式进行重发。
2,格式化返回的json结果,非json结果直接显示。
注:ubuntu下的chromium在处理overflow的问题上貌似有点不一样,所以结果容器写得有点罗嗦。
具体例子:
复制代码 代码如下:





















结果:
JSON辅助格式化处理方法_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 'null';
}
function _format_boolean(object){
return '' + object + '';
}
function _format_number(object){
return '' + object + '';
}
function _format_string(object){
if(0 object = '' + object + ''
}
return '"' + object + '"';
}
function _format_array(object, indent_count){
var tmp_array = [];
for(var i = 0, size = object.length; 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) + '"' + key + '":' + 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 = $('
Nach dem Login kopieren
')
var $result_container = $('
');
$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());
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage