如何附加Ajax Json响应html？

Question

我用ajax得到这样的json：

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

如何在HTML的3个不同位置附加“ delete_flag”，“ id”，“ icon_img”？

Answer 1

您可以使用如下所示的纯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">