json数据在页面中格式化展示

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了json数据在页面中格式化展示相关的知识,希望对你有一定的参考价值。

参考技术A

做项目时候,后端返回json数据要求前端在页面上展示格式化的数据,查了半天的资料,学到了

方法:
JSON.stringify(value, replacer, space)

我们在控制台中打印出来是这样的

但是我们在页面中直接展示的话

但是在页面中展示,他还是一坨,根本不是json格式化后的数据
我们直接在里面添加\'<pre>\'就可以了

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

你看,页面中,数据展示出来的就是 json格式化的数据

jQuery之getjson信息展示

json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取。

$.getJSON(url,[data],[callback])
参数 描述
url  必需。加载的页面地址 。
data 可选项,发送到服务器的数据,格式是key/value 
callback 可选项,加载成功后执行的回调函数 

创建一个json文件Practice_003.json存放在json文件夹下,确保格式正确。

 1 [   
 2 {   
 3 "name":"张三",   
 4 "sex":"男",   
 5 "email":"[email protected]"   
 6 },   
 7 {   
 8 "name":"李四",   
 9 "sex":"男",   
10 "email":"[email protected]"   
11 },   
12 {   
13 "name":"王五",   
14 "sex":"女",   
15 "email":"[email protected]"   
16 }   
17 ]   

创建一个HTML页面,加载json信息

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>json Test</title>
 6     <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>  
 7     <script type="text/javascript">
 8         $(function (){
 9             $("#btn").click(function ()  {
10                 $.getJSON("json/Practice_003.json", function (data){
11                     var $jsontip = $("#jsonTip");
12                     var strHtml = "123";
13                     //存储数据的变量 
14                     $jsontip.empty();
15                     //清空内容 
16                     $.each(data, function (infoIndex, info){
17                         strHtml += "姓名:" + info["name"] + "<br>";
18                         strHtml += "性别:" + info["sex"] + "<br>";
19                         strHtml += "邮箱:" + info["email"] + "<br>";
20                         strHtml += "<hr>" 
21                     }) 
22                     $jsontip.html(strHtml);
23                     //显示处理后的数据 
24                 }) 
25             }) 
26         })
27     </script>
28 
29 </head>
30 <body>
31     <p>show some json test</p>
32     <input type="button" value="获取数据" id="btn"/> 
33     <div id="jsonTip"></div> 
34 </body>
35 </html>

点击页面中的按钮即可

 

以上是关于json数据在页面中格式化展示的主要内容,如果未能解决你的问题,请参考以下文章

jsp页面中,如何使用jquery拼接json格式的数据

jsp页面中,如何使用jquery拼接json格式的数据

从JSON中读取数据追加到HTML中

VUE中字符串实现JSON格式化展示。

js实现格式化JSON数据方法

jQuery之getjson信息展示