Generally some do background data query, to return JSON data back to the page, if need to show the style clearer, intuitive, at a glance, it is necessary to use the HTML+CSS+JS to achieve this small function
First, CSS code
{outline: 1px solid #ccc;} { color: green;} { color: darkorange;} { color: blue;} { color: magenta;} { color: red;}
Second, the HTML part of the code
<id= "Jsonshow"></pre> //must use this tag, Otherwise the displayed JSON is not formatted
Third, JS part
1, first encapsulate a piece of code to show the JSON style (I do not add line number, you can directly copy and take it)
JSONSHOWFN (JSON) {if(!json.match ("^\{(. +:.+,*) {1,}\}$"))) { returnJson//determines whether the JSON data is not returned directly } if(typeofJSON! = ' string ') {JSON= Json.stringify (JSON, Undefined, 2); } JSON= Json.replace (/&/g, ' & '). Replace (/</g, ' < '). Replace (/>/g, ' > '); returnJson.replace (/("(\\u[a-za-z0-9]{4}|\\[^u]|[ ^\\ "]) *" (\s*:)? | \b (True|false|null) \b|-?\d+ (?: \. \d*)? (?: [ee][+\-]?\d+)?) /g,function(match) {varCLS = ' number '; if(/^"/. Test (Match)) { if(/:$/. Test (Match)) {CLS= ' key '; } Else{CLS= ' String '; } } Else if(/true|false/. Test (Match)) {CLS= ' Boolean '; } Else if(/null/. Test (Match)) {CLS= ' null '; } return' <span class= ' + cls + ' "> ' + match + ' </span> '; }); }
2. Function call
$ (' #jsonShow '). HTML (JSONSHOWFN (JSON)) //JSON for the data to be displayed to the page
Four, the effect
I only show part of the code style because the item returns a large amount of query data
In the background to return data in the process, the returned data is a string form of JSON, if you also encounter this situation, first turn the return data into JSON format, using the json.parse () method; If this is not the case, you can use it directly
Good! Done! I hope I can help you.
HTML page Presentation JSON style