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

如何解决从 JSON 文件中获取信息并稍后调用

我尝试从 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 和按钮分开？ （我们的目标是让代码更干净、更有条理。）

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

解决方法

您应该在脚本部分或 .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);
});

,

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

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