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数据在页面中格式化展示的主要内容,如果未能解决你的问题,请参考以下文章