如何将 Ajax Json 响应附加到 html？
Posted
技术标签:
【中文标题】如何将 Ajax Json 响应附加到 html？【英文标题】：How to append Ajax Json respond to 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 个地方 :) 【参考方案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>【讨论】：
以上是关于如何将 Ajax Json 响应附加到 html？的主要内容，如果未能解决你的问题，请参考以下文章