JSON 지원 형식 처리 방법_json

일반적으로 서버 측 개발자는 일반적으로

코드 복사와 유사하게 백엔드를 작성한 후 간단한 인터페이스 설명 페이지를 작성합니다.

param_1< ;/label> ;

param_2 ;< input type="text" name="param_2" value="value_2"/>

param_3 입력 유형= "text" name="param_3" value="value_3"/>

param_4<입력 유형= "text" name="param_4" value="value_4"/>

🎜>< ;/form>

결과가 json 형태로 반환되기 때문에 한눈에 알아보기 어렵기 때문에 편의상 간단히 결과를 처리합니다.
1, 반환 결과를 페이지에서 제어할 수 없기 때문에 요청을 직접 가로채서 ajax를 사용하여 다시 전송합니다.
2. 반환된 json 결과의 형식을 지정하고 json이 아닌 결과를 직접 표시합니다.
참고: Ubuntu의 Chromium은 오버플로 문제를 약간 다르게 처리하는 것으로 보이므로 결과 컨테이너가 약간 장황해집니다.
구체적인 예:

코드 복사 코드는 다음과 같습니다.

>< div id="page">

param_2< /label>

param_3

param_4

;

🎜>< ;script type="text/javascript" src="../js/JSONFormat.js">



결과:


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.search(/^http/)){
object = '' + object + ''
}
return '"' + object + '"';
}
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) + '"' + 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 = $('

')
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%'}, '느린')
});
$('body').append($result_container);
[$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'); );
false 반환
})(create_result_contatiner());