logo标签列表

如何将Ajax Json响应附加到HTML？

javascriptjqueryhtmljsonobject
3

我使用 Ajax 获取一个如下的 JSON：

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

如何在HTML的三个不同位置添加“delete_flag”，“id”和“icon_img”？
纯JavaScript或jQuery - Aniket G
还有哪三个地方呢 :) - Bibberty
5个回答
9
你可以像下面这样使用纯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">

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>

2

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

原始答案: "最初的回答"

1

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>

1

我已经为其他答案点赞了，但也许这会帮助其他人。在您的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 变量放入数组中，然后创建一个函数来解析它们到各自正确的元素中；你可以很容易地自学这个过程。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接