时间戳

首页 > 解决方案 > 基于json结构的简单json操作

json - 基于json结构的简单json操作

问题描述

对于某些特定值，我有一个简单的 json 结构，我必须在特定跨度标记上呈现值。例如，在 id='name1' 的跨度内，我需要再次从 json 中呈现关键的名称，类似于我需要呈现的方式从 json 到 id="value1" 的跨度标签的关键值等等......我已经安慰了数据，但我不知道如何渲染它。下面是代码。提前感谢您的帮助。

html

 <!DOCTYPE html>
    <html>
     <head>
     <meta charset="utf-8">
     <title>jQuery.ajax()</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
     <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
     </head>
     <body class="col-md-12">
     <div id="critical">
     <span id="name1"></span> : <span id="value1"></span>
     </div>
     <div id="major">
     <span id="name2"></span> : <span id="value2"></span>
     </div>
     <div id="minor">
     <span id="name3"></span> : <span id="value3"></span>
     </div>
     <script>
     $(document).ready(function () {
     $.ajax({
     type: "GET",
     url: "1.json",
     success: function(result)
     {
     console.log(result);

     }
     });

    });
     </script>
     </body>
    </html>

json

{
    "critical": [{
        "name": "critical",
        "value": "50"
    }],
    "major": [{
        "name": "major",
        "value": "40"
    }],
    "minor": [{
        "name": "minor",
        "value": "20"
    }]
}

标签： jsonajax

解决方案

使用 jQuery 设置texts span：

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "1.json",
        success: function(result) {
            $("#name1").text(result.critical[0].name);
            $("#value1").text(result.critical[0].value);

            $("#name2").text(result.major[0].name);
            $("#value2").text(result.major[0].value);

            $("#name3").text(result.minor[0].name);
            $("#value3").text(result.minor[0].value);
        }
    });
});

在https://www.lhorn.de/so/尝试一下

推荐阅读