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">

Answer 2

您可以使用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>

Answer 3

只需使用一些简单的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。

Answer 4

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>

Answer 5

我已对其他答案进行了投票，但这也许会对其他人有所帮助。在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变量放入数组中，并创建一个函数将其全部解析为适当的元素；您可以很容易地自己学习。

如何附加Ajax Json响应html？

5 个答案: