基于json结构的简单json manupulation

时间:2018-04-28 17:45:02

标签: json ajax

我有一个特殊值的简单json结构,我必须在特定的span标记上呈现值。例如id =' name1'我需要再次以类似的方式从json渲染critical的名称,我需要将json的值从json渲染到id =" value1"的span标记。等等...我已经安慰了数据即将到来,但我没有得到如何渲染它。下面是代码。谢谢你提前寻求帮助。

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"
    }]
}

1 个答案:

答案 0 :(得分:0)

使用jQuery设置span s的text

$(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/

尝试