如何将 Ajax Json 响应附加到 html？答案

【问题标题】：How to append Ajax Json respond to html?如何将 Ajax Json 响应附加到 html？
【发布时间】：2019-07-26 09:22:51
【问题描述】：

我使用 ajax 得到一个这样的 json：

{"dataStore":"[{\"delete_flag\":\"false\",\"id\":\"74\",\"icon_img\":\"img/a5.jpeg\"}]"}

如何将 "delete_flag" 、 "id" 、 "icon_img" 附加到 html 的 3 个不同位置？

【问题讨论】：

纯 javascript 或 jQuery
还有什么 3 个地方 :)

标签： javascript jquery html json object

【解决方案1】：

只需使用一些简单的 JavaScript 解析：

const jsonData = {"dataStore":"[{\"delete_flag\":\"false\",\"id\":\"74\",\"icon_img\":\"img/a5.jpeg\"}]"};

const parsedData = JSON.parse(jsonData.dataStore)[0];

document.getElementById("delFlag").textContent = "Delete Flag: " + parsedData["delete_flag"];
document.getElementById("id").textContent = "ID: " + parsedData["id"];
document.getElementById("img").textContent = "Image: " + parsedData["icon_img"];

<p id="delFlag"></p>
<p id="id"></p>
<p id="img"></p>

请注意，您无法解析完整的对象 jsonData，因为它不是 JSON - 只有其中的数据是 JSON。

【讨论】：

【解决方案2】：

var data = {
  "dataStore": {
    "delete_flag": "false",
    id: "74"
  }
}

$('.flag').html(data.dataStore.delete_flag);

$('.id').html(data.dataStore.id);

span {
  color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Flag: <span class="flag"></span> 
<hr />
ID: <span class="id"></span>

【讨论】：

【解决方案3】：

您可以使用这种纯 javascript 方法，如下所示。

代码基本使用document.getElementById()获取元素，.innerHTML将元素内部设置为对象的值。

这段代码（以及使用 jQuery 的代码）都使用JSON.parse() 将数据解析为我们的代码可以读取的正确对象。最后的[0] 是选择我们想要的对象，因为它会给我们一个数组（我们想要一个对象）。

const result = {"dataStore":"[{\"delete_flag\":\"false\",\"id\":\"74\",\"icon_img\":\"img/a5.jpeg\"}]"};
const parsedData = JSON.parse(result.dataStore)[0];

document.getElementById("delete_flag").innerHTML = parsedData.delete_flag;
document.getElementById("id").innerHTML = parsedData.id;
document.getElementById("icon_img").src = parsedData.icon_img;

<div id="delete_flag"></div>
<div id="id"></div>
<img id="icon_img">

或者您可以使用jQuery（在我看来，这要简单得多）。下面的代码使用.html() 将div 的内部更改为对象中的项目，并使用.attr() 将属性src 设置为您想要的图像源。

const result = {"dataStore":"[{\"delete_flag\":\"false\",\"id\":\"74\",\"icon_img\":\"img/a5.jpeg\"}]"};
const parsedData = JSON.parse(result.dataStore)[0];

$("#delete_flag").html(parsedData.delete_flag);
$("#id").html(parsedData.id);
$("#icon_img").attr("src", parsedData.icon_img);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="delete_flag"></div>
<div id="id"></div>
<img id="icon_img">

【讨论】：

【解决方案4】：

我赞成其他答案，但也许这会对其他人有所帮助。在您的 ajax 成功函数上，执行以下操作：

success: function(data){
         // console.log('succes: '+data);
            var delete_flag = data['delete_flag'];
          $('#results').html(delete_flag); // update the DIV or whatever element
        }

如果你真的很喜欢，你可以创建一个 for 循环并将你需要的所有 json 变量放入一个数组中，然后创建一个函数来将它们全部解析为适当的元素；你可以很容易地自学。

【讨论】：

【解决方案5】：

你可以使用 jQuery .html() 或 .text()

例如：

var json = {"id" : "74"};

$( "#content" )
  .html( "<span>This is the ID: " + json.id + "</span>" );

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div id="content"></div>
</body>

</html>

【讨论】：