Ajax进阶篇01---Ajax加强（含大量代码演示），字节前端社招面试

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

首先，我们需要创建一个HTML文件，并在其中放置一个用于输入城市名称的输入框和一个用于显示天气信息的段落。




<!DOCTYPE html>
<html>
<body>
 
<h2>Enter the city name</h2>
 
<input id="city" type="text" value="London">
<button type="button" onclick="getWeather()">Get Weather</button>
 
<p id="weather-info"></p>
 
<script src="script.js"></script>
 
</body>
</html>

然后，我们需要创建一个JavaScript文件，并在其中编写用于发送Ajax请求并处理响应的函数。




function getWeather() {
    var city = document.getElementById('city').value;
    var apiKey = 'YOUR_API_KEY'; // 替换为你的OpenWeatherMap API密钥
    var url = 'http://api.openweathermap.org/data/2.5/weather?q=' + city + '&appid=' + apiKey;
 
    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);
            var weatherInfo = 'City: ' + data.name + '<br>' +
                              'Temperature: ' + data.main.temp + '°C<br>' +
                              'Pressure: ' + data.main.pressure + ' hPa<br>' +
                              'Humidity: ' + data.main.humidity + ' %<br>' +
                              'Wind speed: ' + data.wind.speed + ' m/s';
            document.getElementById('weather-info').innerHTML = weatherInfo;
        }
    };
    xhr.send();
}

在这段代码中，我们首先获取用户输入的城市名称，然后构造一个URL，用于从OpenWeatherMap API获取天气数据。我们创建了一个XMLHttpRequest对象，并设置了请求方法、URL以及处理响应函数。在处理函数中，我们解析了响应的JSON数据，并构造了一个包含天气信息的字符串，然后将这个字符串设置为段落元素的innerHTML，从而在网页上显示天气信息。

注意：你需要替换'YOUR\_API\_KEY'为你从OpenWeatherMap获取的实际API密钥。

这个简单的应用程序演示了如何使用Ajax从外部API获取数据，并在用户的网页上显示这些数据。这是学习Ajax的基本知识，并将其应用于实际场景的一个很好的例子。

Ajax进阶篇01---Ajax加强（含大量代码演示），字节前端社招面试

评论已关闭

推荐阅读