从 AJAX 读取 JSON 数据 [重复]

Question

考虑：

 $.ajax({
        type: "POST",
        url: "/myurl",
        async: false,
        data: JSON.stringify({}),
        contentType: "application/json",
        complete: function (data) {
                var results = data["responseText"];
                alert(results)
        },
        error: function () {
              alert("Error")
        }
 });

返回的 JSON：

{"jsonrpc": "2.0", "id": null, "result": "{\"ids\": [{\"id\": 1, \"name\": \"Messi\"}, {\"id\": 2, \"name\": \"Ronaldo\"}]}"}

如何在 div 中添加如下数据？

1 Messi

2 Ronaldo

Answer 1

从您的 Ajax 响应中选择 ids 属性，遍历它并使用该信息准备所需的 HTML 结构。最后，将此 HTML 字符串插入您的 HTML 页面。

/*
    $.ajax({
        type: "POST",
        url: "/myurl",
        async: false,
        data: JSON.stringify({}),
        contentType: "application/json",
        complete: function (data) {
                      var response = data["responseText"];
                      var insertDatas = JSON.parse(response.result);
                      var htmlString = "";
                      insertDatas.ids.forEach(function( item ){
                          htmlString += '<li>'+item.name+'</li>';
                      });//forEach()

                      $("#players-list").html( htmlString );
                  },
                  error: function () {
                      alert("Error")
                  }
    });
*/

var response = {
  "jsonrpc": "2.0",
  "id": null,
  "result":
    {"ids":
      [
       {"id": 1, "name": "Messi"},
       {"id": 2, "name": "Ronaldo"}
      ]
    }
};

var htmlString = "";
response.result.ids.forEach(function(item){
    htmlString += '<li>' + item.name + '</li>';
});//forEach()

$("#players-list").html( htmlString );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ol id="players-list"></ol>