从 JSON 文件中获取信息并稍后调用答案

【问题标题】：Get information from a JSON file and call it later从 JSON 文件中获取信息并稍后调用
【发布时间】：2021-05-16 09:14:09
【问题描述】：

我尝试从在线 JSON 中获取信息

jQuery:

$.getJSON('https://api.example.com/example.json', function(data) {
    var first = data.first;
    var second = data.second;
});

稍后，在某个时刻，我想调用并更新部分信息：

$("#boto").click(function() {   
    $('#check').text(first);
});

HTML：

<p id="boto">boto</p>
<p id="check">check</p>
<p id="check2">check2</p>

我知道我可以将这两个部分放在一起，也许当我单击按钮时。我的问题是，是否可以将 getJASON 和按钮分开？（目标是有一个更干净和有组织的代码。）

我是初学者，我会努力学习。我进行了激烈的搜索，但我无法在网上找到信息。也许我不知道如何搜索这个主题。我会很感激任何方向。请教基础知识。

【问题讨论】：

标签： jquery json getjson

【解决方案1】：

您应该在脚本部分或 .js 文件中声明一个全局变量，并为其设置 JSON 数据。然后，当您单击按钮时，使用这些变量设置数据。像这样的东西应该可以满足您的需求。

<script>

var firstData = null;
var secondData = null;

$.getJSON('https://api.example.com/example.json', function(data) {
    firstData = data.first;
    secondData = data.second;
});

$("#boto").click(function() {   
    $('#check').text(firstData);
});

【讨论】：

我在询问之前尝试过，但它不起作用。在真实案例中自己尝试一下。它有两个问题： - 它只更新一次信息。您必须重新加载页面才能再次获取信息 - 如果您不包含 var firstData 它不会进行任何更改。我认为，它将文本放在 div 检查中，因为 firstData 作为全局变量工作（因为它没有变量）
这适用于常规函数。这里的问题在于 getJSON
你能从 $("#boto") 函数中再次调用 $.getJSON 吗？这样当你点击更新时，它也会调用getJSON并再次更新变量？您能否将 $.getJSON 放入一个函数中，然后在需要刷新变量时调用该函数？
我不能把我尝试过的所有东西都放在这里，因为这会令人困惑。但我试过了。再次的问题是，如果我按照您的建议进行操作，则必须将 $('#check').text(firstData);在 getJSON 中。我尝试将 var 与将 var 放在 div 中分开
我是说将 getJSON 放入它自己的函数中，然后在 onClick 或其他您可能需要更新数据的时候调用它。为什么 .click 函数不能访问 firstData 变量？如果您需要在每次 div 时更新 var，则无法将 var 与 div 分开。如果 var 只更新一次，那么您所拥有的就可以了，但如果 var 需要再次更新，则必须在需要更新 var 时再次调用该 getJSON 函数。

【解决方案2】：

已更新，现在我添加了一个回调函数以使其更容易

你可以使用 Ajax 来做到这一点

function loadDoc(link, callback) {
  var ajax = new XMLHttpRequest();
  ajax.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // Successfully Got All Data
      let data = this.response // All Response data From The Server
      callback(data); //Giving Data To Callback Function To Run After Getting All Data
    }
  };
  ajax.open("GET", link, true);
  ajax.send();
}

loadDoc("https://www.example.com/data", function(data) {
    //Do Stuff with ```data```
})

【讨论】：