Ajax从零到实战

在这个问题中，我们将使用JavaScript和Ajax来创建一个简单的天气预报应用程序。我们将使用OpenWeatherMap的API来获取天气数据。

首先，你需要在OpenWeatherMap上注册以获取API密钥。

以下是实现这个应用程序的步骤：

创建HTML结构
使用JavaScript和Ajax获取天气数据
更新HTML以显示天气信息

以下是实现上述步骤的代码：

HTML:




<!DOCTYPE html>
<html>
<body>
 
<div id="main">
  <input type="text" id="city" placeholder="Enter city name here">
  <button id="submit">Get Weather</button>
  <div id="weather"></div>
</div>
 
<script src="script.js"></script>
</body>
</html>

JavaScript (script.js):




document.getElementById('submit').addEventListener('click', function(){
  var city = document.getElementById('city').value;
  var url = 'http://api.openweathermap.org/data/2.5/weather?q='+city+'&appid=YOUR_API_KEY';
 
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var data = JSON.parse(xhr.responseText);
      updateWeather(data);
    }
  };
  xhr.send();
});
 
function updateWeather(data){
  var weatherDiv = document.getElementById('weather');
  weatherDiv.innerHTML = 'Temperature: ' + data.main.temp + '°C<br>' + 
                         'Description: ' + data.weather[0].description + '<br>' + 
                         'Humidity: ' + data.main.humidity + '%';
}

在上述代码中，我们首先获取了用户输入的城市名称，然后构建了一个URL，用于从OpenWeatherMap API获取数据。我们使用XMLHttpRequest对象发送GET请求，然后在请求完成时，我们解析返回的JSON数据，并更新页面上的天气信息。

请确保将'YOUR\_API\_KEY'替换为你在OpenWeatherMap上获取的实际API密钥。

这个简单的应用程序演示了如何使用Ajax从外部数据源获取数据，并在用户界面中显示这些数据。

Ajax从零到实战

评论已关闭

推荐阅读