📜  加载 json - Javascript (1)

📅  最后修改于: 2023-12-03 15:22:46.475000             🧑  作者: Mango

加载 JSON - Javascript

在Javascript中,你可以通过使用内建的JSON对象来加载和解析JSON数据。

加载JSON数据

要在Javascript中加载JSON数据,你需要先创建一个XMLHttpRequest对象,然后使用该对象来读取一个JSON文件。这个JSON文件可以存在于本地硬盘上,也可以存在于网络上。一旦JSON文件被读取,你可以使用JSON.parse()函数将其转换成Javascript对象。

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 加载文件
xhr.open('GET', 'path/to/file.json', true);

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};

xhr.send();
加载外部API

许多Web应用程序使用外部API来获取数据。使用Javascript可以轻松地加载这些API返回的JSON数据。在下面的例子中,我们将使用Google Maps API获取指定位置的天气数据。

// 定义获取天气数据的函数
function getWeatherData(lat, lng) {
  // 构造URL
  var url ='http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lng + '&appid= YOUR_API_KEY';

  // 创建XMLHttpRequest对象
  var xhr = new XMLHttpRequest();

  // 加载URL
  xhr.open('GET', url, true);

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var data = JSON.parse(xhr.responseText);
      console.log(data);
    }
  };

  xhr.send();
}

// 调用该函数,获取北京市的天气数据
getWeatherData(39.9075, 116.3972);
小结

在Javascript中,我们可以使用内建的JSON对象来加载和解析JSON数据。无论是从本地硬盘还是从网络上加载JSON数据,只需要创建XMLHttpRequest对象,然后使用JSON.parse()函数将它转换成Javascript对象即可。加载和解析外部API返回的JSON数据同样易如反掌,只需要构造正确的URL,并在XHR对象上发送请求即可。