json格式化显示在页面上

最新推荐文章于 2025-05-17 10:15:00 发布

原创最新推荐文章于 2025-05-17 10:15:00 发布 · 453 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#json #前端

开发经验专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种在网页上格式化并展示JSON数据的方法，通过JavaScript实现了JSON字符串的解析与美化输出，同时探讨了不同参数对输出效果的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #demo {
      background: rgba(255, 227, 141, 0.49);
      padding: 20px;
    }
  </style>
</head>
<body>
<p id="demo"></p>
<script>
  var str = '{"@type":"java.util.HashMap","money":50,"productId":100,"_business_key_":"1624608002666","businessKey":"1624608002666","count":1,"mockReduceAccountFail":"true","userId":14389,"order":{"@type":"io.seata.sample.entity.Order","count":1,"id":"41066682484a4ad3aecdd8a195fc2a40","payAmount":50,"productId":1001,"userId":14389}}'
  str = JSON.parse(str)
  str_pretty1 = JSON.stringify(str)
  document.write( "只有一个参数情况：" );
  document.write( "<br>" );
  document.write("<pre>" + str_pretty1 + "</pre>" );
  document.write( "<br>" );
  str_pretty2 = JSON.stringify(str, null, 4) //使用四个空格缩进
  document.write( "使用参数情况：" );
  document.write( "<br>" );
  document.write("<pre>" + str_pretty2 + "</pre>" ); // pre 用于格式化输出
  document.getElementById("demo").innerHTML = "<pre>" + str_pretty2 + "</pre>";
</script>
</body>
</html>