Because the results are returned in json format and are not easily identified at a glance, the results are simply processed for convenience:
1. Because the page of returned results cannot be controlled, the request is intercepted directly and re-sent in ajax mode.
2. format the returned json results. Non-json results are directly displayed.
Note: chromium in ubuntu seems to be a little different in terms of Handling overflow, so the result container is a bit cool.
Example:Copy codeThe Code is as follows: <! 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>
Result:
JSONFormat. js content:Copy codeThe Code is as follows: 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.css Text = 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: '000000'}, 'low ');
}, Function (){
$ (This). stop (true). animate ({width: '5% '}, 'low ');
});
$ ('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 + ')'));
Optional result.html (j. toString ());
} Catch (e ){
$Result.html($result.text(responseapps.html ());
}
$ Result_container.stop (true). animate ({width: '000000'}, 'low ');
});
Return false;
});
}) (Create_result_contatiner ());
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
