json格式数据插件_有没有插件让前端页面输入只能是json类型-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45428021/article/details/124735563

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery查看json格式数据插件</title>
  <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
  <link href="css/jquery.json-viewer.css" type="text/css" rel="stylesheet" />
  <style>
    body {
      background-color: #F7F7F7
    }

    #jsonPre {
      padding: 10px 30px;
    }
  </style>
</head>

<body>
  <div class="jq22-container">
    <div class="container" style="margin-top: 1em;">
      <div class="row">
        <div class="form-group" style="padding: 1em 0;">
          <button id="btn-json-viewer" onclick="initJson(aaa)" class="btn btn-info">转换Json数据</button>
        </div>
        <pre id="jsonPre"></pre>
      </div>
    </div>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="js/jquery.json-viewer.js"></script>
    <script type="text/javascript">
      var aaa = {
        "id": 1001,
        "type": "donut",
        "name": "Cake",
        "description": "http://www.jq22.com",
        "price": 2.55,
        "available": {
          store: 42,
          warehouse: 600
        },
        "topping": [
          { "id": 5001, "type": "None" },
          { "id": 5002, "type": "Glazed" },
          { "id": 5005, "type": "Sugar" },
          { "id": 5003, "type": "Chocolate" },
          { "id": 5004, "type": "Maple" }
        ]
      }
      function initJson(jsonData) {
        try {
          var input = eval(jsonData);
          console.log(input)
        }
        catch (error) {
          return alert("Cannot eval JSON: " + error);
        }
        var options = {
          collapsed: $('#collapsed').is(':checked'),
          withQuotes: $('#with-quotes').is(':checked')
        };
        $('#jsonPre').jsonViewer(input, options);
      }
    </script>
</body>

</html>