利用jquery如何从json中读取数据追加到html中

利用jquery从json中读取数据并追加到HTML页面中的过程一般包含以下几个步骤：

1. 通过ajax请求获取json数据
2. 解析json数据
3. 根据解析出的数据动态生成HTML代码
4. 将生成的HTML代码追加到HTML页面中

以下是两个示例说明：

示例1：简单示例获取json数据并追加到HTML页面中

假设我们有一个JSON数据文件data.json，它的内容类似于：

{
    "name": "John",
    "age": 30,
    "city": "New York"
}

我们需要将数据读取出来追加到一个HTML页面中，代码如下：

html代码：

<div id="output"></div>

jQuery代码：

$(document).ready(function(){
    $.getJSON("data.json", function(data){
        var items = [];
        $.each(data, function(key, val){
            items.push("<li>" + key + ": " + val + "</li>");
        });
        $( "<ul/>", {
            "class": "my-new-list",
            html: items.join("")
        }).appendTo("#output");
    });
});

运行该代码后会生成以下HTML代码并追加到页面中：

<div id="output">
    <ul class="my-new-list">
        <li>name: John</li>
        <li>age: 30</li>
        <li>city: New York</li>
    </ul>
</div>

示例2：利用ajax从API获取并处理json数据，并将动态生成的HTML代码追加到页面中

假设我们需要从一个API读取数据并追加到HTML页面中，API返回的JSON数据如下：

[
    {
        "title": "Post 1",
        "body": "This is the first post."
    },
    {
        "title": "Post 2",
        "body": "This is the second post."
    },
    {
        "title": "Post 3",
        "body": "This is the third post."
    }
]

我们需要将数据读取出来追加到一个HTML页面中，代码如下：

html代码：

<div id="output"></div>

jQuery代码：

$(document).ready(function(){
    $.ajax({
      url: "https://jsonplaceholder.typicode.com/posts",
      dataType: "json",
      success: function(data){
          var items = [];
          $.each(data, function(key, val){
              items.push("<div>" +
                      "<h2>" + val.title + "</h2>"+
                      "<p>" + val.body + "</p>"+
                      "</div>");
          });
          $("#output").append(items.join(""));
      }
    }); 
});

运行该代码后会生成以下HTML代码并追加到页面中：

<div id="output">
    <div>
        <h2>Post 1</h2>
        <p>This is the first post.</p>
    </div>
    <div>
        <h2>Post 2</h2>
        <p>This is the second post.</p>
    </div>
    <div>
        <h2>Post 3</h2>
        <p>This is the third post.</p>
    </div>
</div>

以上就是利用jquery从json中读取数据追加到HTML中的完整攻略。