JavaScript原生AJAX实现天气API数据获取与展示：温度与描述-js教程-PHP中文网

JavaScript原生AJAX实现天气API数据获取与展示：温度与描述

心靈之曲

发布： 2025-09-19 14:48:01

原创

449人浏览过

JavaScript原生AJAX实现天气API数据获取与展示：温度与描述

本文详细讲解如何使用原生JavaScript的XMLHttpRequest对象实现AJAX请求，从天气API获取数据。我们将重点演示如何准确地访问JSON响应中嵌套的温度（main.temp）和天气描述（weather[0].description）字段，并将这些信息同时显示在网页上，提供完整的代码示例和解析。

1. 理解API响应的JSON数据结构

在从api获取数据之前，首先需要了解api返回的数据结构。一个典型的天气api响应通常是一个json对象，其中包含多个嵌套的对象和数组。例如，我们所使用的api（https://mm214.com/jsondemo.php）可能返回类似以下结构的json数据：

{
  "coord": { /* ... */ },
  "weather": [{
    "id": 300,
    "main": "Drizzle",
    "description": "light intensity drizzle", // 我们需要的天气描述
    "icon": "09d"
  }],
  "base": "stations",
  "main": {
    "temp": 280.32, // 我们需要的温度
    "pressure": 1012,
    "humidity": 81,
    "temp_min": 279.15,
    "temp_max": 281.15
  },
  "visibility": 10000,
  "wind": { /* ... */ },
  "clouds": { /* ... */ },
  "dt": 1485789600,
  "sys": { /* ... */ },
  "id": 2643743,
  "name": "London",
  "cod": 200
}

登录后复制

从上述结构中，我们可以看到：

温度（Temperature）：位于 main 对象内部的 temp 字段，通过 data.main.temp 访问。
天气描述（Weather Description）：位于 weather 数组的第一个元素（一个对象）内部的 description 字段。因此，需要通过 data.weather[0].description 访问。weather 字段是一个数组，即使只有一个天气状况，它也会被封装在一个数组中。

理解这种嵌套结构是正确获取数据的关键。

2. 使用XMLHttpRequest实现AJAX请求

XMLHttpRequest (XHR) 是浏览器内置的API，用于在不重新加载页面的情况下向服务器发送HTTP请求和接收响应。以下是一个封装了XHR请求的 getJSON 函数：

const getJSON = function(url, callback) {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url, true); // 初始化请求，使用GET方法，并设置为异步
    xhr.responseType = 'json'; // 期望服务器响应的数据类型为JSON

    // 监听请求状态变化或响应加载完成
    xhr.onload = function() {
        let status = xhr.status;
        if (status === 200) { // HTTP状态码200表示请求成功
            callback(null, xhr.response); // 调用回调函数，传递null作为错误，xhr.response作为数据
        } else {
            callback(status); // 如果状态码不是200，传递状态码作为错误
        }
    };

    // 监听网络错误或CORS问题
    xhr.onerror = function() {
        callback('Network error or CORS issue');
    };

    xhr.send(); // 发送请求
};

登录后复制

代码解析：

立即学习“Java免费学习笔记（深入）”；

xhr.open('GET', url, true): 配置请求。'GET' 是HTTP方法，url 是API地址，true 表示请求是异步的。
xhr.responseType = 'json': 告诉XHR期望服务器返回JSON格式的数据。这样，xhr.response 将自动被解析为JavaScript对象。
xhr.onload: 当请求成功加载完成时触发。在这个回调中，我们检查 xhr.status 是否为 200（HTTP OK），然后调用传入的 callback 函数。
xhr.onerror: 当请求遇到网络错误（如断网、CORS问题等）时触发。
xhr.send(): 发送HTTP请求。

3. 在网页上显示天气数据

为了在网页上显示获取到的温度和天气描述，我们需要在HTML中准备相应的占位符元素。通常使用 <span> 标签并赋予唯一的 id。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>当前天气信息</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; line-height: 1.6; }
        #weather-display { border: 1px solid #e0e0e0; padding: 15px; border-radius: 8px; max-width: 350px; background-color: #f9f9f9; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        #weather-display div { margin-bottom: 10px; display: flex; align-items: center; }
        #weather-display strong { display: inline-block; width: 80px; color: #333; font-size: 1.1em; }
        #temp, #weather-description { font-weight: bold; color: #007bff; font-size: 1.1em; }
        h1 { color: #333; border-bottom: 2px solid #007bff; padding-bottom: 10px; margin-bottom: 20px; }
    </style>
</head>
<body>

    <h1>当前天气信息</h1>
    <div id="weather-display">
        <div><strong>温度:</strong> <span id="temp">加载中...</span></div>
        <div><strong>描述:</strong> <span id="weather-description">加载中...</span></div>
    </div>

    <script>
    // getJSON 函数定义同上
    const getJSON = function(url, callback) {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'json';

        xhr.onload = function() {
            let status = xhr.status;
            if (status === 200) {
                callback(null, xhr.response);
            } else {
                callback(status);
            }
        };

        xhr.onerror = function() {
            callback('Network error or CORS issue');
        };

        xhr.send();
    };

    // 您的API端点
    const API_URL = 'https://mm214.com/jsondemo.php';

    getJSON(API_URL, function(err, data) {
        const tempElement = document.getElementById("temp");
        const weatherDescElement = document.getElementById("weather-description");

        if (err) {
            console.error('获取天气数据失败:', err);
            if (tempElement) tempElement.innerHTML = '获取失败';
            if (weatherDescElement) weatherDescElement.innerHTML = '获取失败';
            alert('获取天气数据时发生错误: ' + err);
        } else {
            // 确保数据存在且结构正确
            if (data && data.main && typeof data.main.temp !== 'undefined') {
                // 假设API返回开尔文温度，可根据需要转换为摄氏度或华氏度
                if (tempElement) tempElement.innerHTML = data.main.temp + ' K';
            } else {
                if (tempElement) tempElement.innerHTML = 'N/A';
            }

            // weather是一个数组，通常第一个元素包含主要的天气描述
            if (data && data.weather && data.weather.length > 0 && data.weather[0].description) {
                if (weatherDescElement) weatherDescElement.innerHTML = data.weather[0].description;
            } else {
                if (weatherDescElement) weatherDescElement.innerHTML = 'N/A';
            }
        }
    });
    </script>

</body>
</html>

登录后复制

关键点：

HTML结构： 两个 <span> 元素，分别用于显示温度 (id="temp") 和天气描述 (id="weather-description")。
数据访问： 在 getJSON 的回调函数中，通过 data.main.temp 访问温度，通过 data.weather[0].description 访问天气描述。注意 weather 是一个数组，因此需要 [0] 来获取第一个天气对象。
DOM更新： 使用 document.getElementById("id").innerHTML = value 将获取到的数据更新到对应的HTML元素中。
健壮性： 在访问 data.main.temp 和 data.weather[0].description 之前，添加了对 data、data.main、data.weather 以及 data.weather.length 的存在性检查，以防止因API响应不完整或结构不符导致错误。
温度单位： 示例中假定API返回的是开尔文温度，并添加了 " K" 后缀。实际应用中，您可能需要将其转换为摄氏度或华氏度。

4. 注意事项与最佳实践

错误处理： 始终实现健壮的错误处理机制。在 getJSON 函数中，我们处理了HTTP状态码非200的情况以及网络错误。在回调函数中，也应该优雅地显示错误信息给用户，而不是让页面崩溃。

Vinteo AI
利用人工智能在逼真的室内环境中创建产品可视化。无需设计师和产品照片拍摄

62

查看详情
API密钥： 许多公共API需要API密钥进行认证。在本示例中，API不需要密钥，但在实际项目中，请确保妥善管理和保护您的API密钥（例如，不要直接暴露在前端代码中，而通过后端代理请求）。
异步性理解： AJAX请求是异步的。这意味着 getJSON 函数会立即返回，而数据处理逻辑会在请求完成后（即 callback 被调用时）执行。
跨域资源共享 (CORS)： 如果您的网页与API位于不同的域，浏览器可能会阻止请求，出现CORS错误。这通常需要服务器端配置来允许跨域请求。
温度单位转换： 不同的天气API可能返回不同的温度单位（如开尔文、摄氏度、华氏度）。在显示之前，请确保进行必要的单位转换以符合用户预期。

现代替代方案： 尽管 XMLHttpRequest 功能强大，但现代JavaScript开发中更推荐使用 Fetch API 或第三方库如 Axios，它们提供了更简洁、更Promise化的API来处理HTTP请求。例如：

// 使用Fetch API
fetch(API_URL)
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        // 处理数据并更新DOM
        document.getElementById("temp").innerHTML = data.main.temp + ' K';
        document.getElementById("weather-description").innerHTML = data.weather[0].description;
    })
    .catch(error => {
        console.error('获取天气数据失败:', error);
        document.getElementById("temp").innerHTML = '获取失败';
        document.getElementById("weather-description").innerHTML = '获取失败';
    });

登录后复制

总结

通过本文，我们学习了如何使用原生JavaScript的 XMLHttpRequest 对象从API获取天气数据。关键在于理解API响应的JSON数据结构，特别是如何访问嵌套的对象属性和数组元素。通过清晰的HTML结构和JavaScript逻辑，我们可以轻松地将API数据动态地呈现在网页上，并结合错误处理和最佳实践，构建出健壮且用户友好的应用。虽然 XMLHttpRequest 是基础，了解现代的 Fetch API 也能帮助您编写更简洁高效的代码。

以上就是JavaScript原生AJAX实现天气API数据获取与展示：温度与描述的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

理解AJAX POST与传统表单POST：PHP页面数据处理与重定向的最佳实践 JavaScript BUG：PHP 生成的事件处理函数中的参数传递问题 JavaScript 事件处理中的字符串与变量混淆问题及解决方案 JavaScript事件处理中ID引用陷阱与跨语言引号管理 AJAX删除功能调试：解决后端POST参数缺失导致的JSON解析与操作失败