javascript:json的基本用法_javascript json 用法-优快云博客

本文链接：https://blog.youkuaiyun.com/yanloveyang/article/details/41550365

本文演示如何使用JavaScript和JSON对象动态展示个人详细信息，包括姓名、年龄、性别和地址，通过点击按钮将JSON对象转换为字符串显示。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>javascript:JSON</title>
 <style type="text/css">
  #json_show{
   width:500px;
   height:100px;
   border:1px solid #998;
   border-radius:5px;
  }
  label{
   display: inline-block;
   width: 100px;
   text-align: right;
   margin-right: 10px;
   font-family: microsoft yahei;
   font-size: 16px;
   line-height: 28px;
  }
  .info_txt{
   display: inline;
   font-size: 14px;
   font-family: microsoft yahei ;
  }
 </style>
 <script type="text/javascript">
  window.onload = function()
  {
   var jsonStr = {name:'YangChen',age:26,sex:'male',addr:"Hangzhou City .Zhejiang Province .China"};
   var name = jsonStr.name;
   var age = jsonStr.age;
   var sex = jsonStr.sex;
   var addr = jsonStr.addr;
   document.getElementById("txt_name").innerHTML = name;
   document.getElementById("txt_sex").innerHTML = sex;
   document.getElementById("txt_age").innerHTML = age;
   document.getElementById("txt_addr").innerHTML = addr;
   var btn = document.getElementById("btn_json");
   btn.onclick = function()
   {
    document.getElementById("json_show").innerHTML = toString(jsonStr);
   }
  }
 </script>
</head>
<body>
 <div id="json_show"></div>
 <input type="button" id="btn_json" value="JSON" />
 <div class="userInfo">
  <label for="txt_name">Name</label> <span class="info_txt" id="txt_name"></span> <br>
  <label for="txt_age">Age</label> <span class="info_txt" id="txt_age"></span><br>
  <label for="txt_sex">Sex</label> <span class="info_txt" id="txt_sex"></span><br>
  <label for="txt_addr">Addr</label> <span class="info_txt" id="txt_addr"></span>
 </div>
</body>
</html>