如何在 AJAX 中修复此 JSON for 循环？答案

【问题标题】：How to fix this JSON for loop in AJAX?如何在 AJAX 中修复此 JSON for 循环？
【发布时间】：2017-08-08 07:28:27
【问题描述】：

每次我按下按钮时，按钮都不会消失，但它仍然会输出我喜欢的 JSON 文件中的内容，但是当我越来越多地按下按钮时。页面上不断生成相同的内容。所以我只希望按钮在按下时消失，并且我希望 JSON 内容只显示一次。

JSON 文件

[
{
        "name": "Adam",
        "age": 21,
        "interest": ["food", "relaxing"]
    },

    {
        "name": "Bob",
        "age": 22,
        "interest": ["working out", "sleeping"]
    },

    {
        "name": "Cane",
        "age": 23,
        "interest": ["football", "vide games"]
    }
    ]

AJAX 文件

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<button id="bg" type="button" onclick="x()">Change Content</button>
</div>

<script>
function x() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var employees = JSON.parse(xhr.responseText);
for(var i=0;i<employees.length;i++){
    employee = employees[i];
    document.getElementById("demo").innerHTML += "<br>" + employee.name;
}
}
};
xhr.open("GET", "json_example_2.json", true);
xhr.send();
}
</script>

</body>
</html>

【问题讨论】：

the button doesn't disappear 为什么要呢？你没有做任何事情让它消失

标签： javascript html ajax

【解决方案1】：

要摆脱按钮，只需在上面添加这一行：

document.getElementById("demo").innerHTML = ""; // <- this line
var employees = ...;

这将在添加员工姓名之前清除innerHTML。

如果您不想完全摆脱按钮，也可以将其隐藏：

document.getElementById("bg").style.display = 'none';

【讨论】：

好吧，我刚刚意识到，但 div 中的任何东西都不应该消失并被 JSON 内容替换吗？
是的，这就是为什么最好隐藏它。更好的是在按钮上方创建一个新的div 并将您的 JSON 插入其中，这样您就可以将 JSON 和控件分开。