正文

学会用jQuery轻松获取天气信息：从数据库到实时显示

/0 浏览量
0901

在数字化时代，获取实时天气信息已成为许多人日常生活的一部分。而使用jQuery这样的前端框架，可以让我们更加轻松地实现这一功能。本文将带你了解如何从数据库获取天气信息，并通过jQuery将其实时显示在网页上。

一、准备工作

在开始之前，我们需要做好以下准备工作：

  1. 环境搭建：确保你的开发环境中已安装Node.js、npm以及MySQL数据库。
  2. 数据库创建：创建一个名为weather_info的数据库，并在其中创建一个名为weather_data的表，用于存储天气信息。
  3. jQuery库：在你的HTML文件中引入jQuery库。

二、创建数据库

以下是创建weather_info数据库和weather_data表的SQL语句：

CREATE DATABASE weather_info;

USE weather_info;

CREATE TABLE weather_data (
    id INT AUTO_INCREMENT PRIMARY KEY,
    city VARCHAR(50),
    temperature DECIMAL(5, 2),
    humidity INT,
    pressure INT,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

三、获取天气信息

接下来，我们需要编写一个后端API来获取天气信息。这里我们使用Node.js和Express框架来实现。

  1. 安装Express：
npm install express
  1. 创建API：
const express = require('express');
const mysql = require('mysql');
const app = express();
const port = 3000;

// 创建数据库连接
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'your_username',
    password: 'your_password',
    database: 'weather_info'
});

// 连接数据库
connection.connect();

// 获取天气信息
app.get('/weather', (req, res) => {
    const city = req.query.city;
    const query = 'SELECT * FROM weather_data WHERE city = ? ORDER BY updated_at DESC LIMIT 1';
    connection.query(query, [city], (error, results) => {
        if (error) throw error;
        res.json(results);
    });
});

// 启动服务器
app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

四、前端实现

现在，我们使用jQuery将获取到的天气信息实时显示在网页上。

  1. 引入jQuery库：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  1. 编写jQuery代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气信息</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 获取城市名称
            const city = '北京';

            // 获取天气信息
            function getWeather() {
                $.ajax({
                    url: `/weather?city=${city}`,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        // 显示天气信息
                        $('#temperature').text(`温度：${data[0].temperature}℃`);
                        $('#humidity').text(`湿度：${data[0].humidity}%`);
                        $('#pressure').text(`气压：${data[0].pressure}Pa`);
                    },
                    error: function() {
                        console.log('获取天气信息失败');
                    }
                });
            }

            // 每隔5分钟更新天气信息
            setInterval(getWeather, 300000);

            // 初始加载天气信息
            getWeather();
        });
    </script>
</head>
<body>
    <h1>天气信息</h1>
    <p id="temperature">温度：待更新</p>
    <p id="humidity">湿度：待更新</p>
    <p id="pressure">气压：待更新</p>
</body>
</html>

五、总结

通过本文的介绍，你现在应该已经掌握了如何使用jQuery从数据库获取天气信息，并将其实时显示在网页上。当然，这只是一个简单的示例，实际应用中可能需要考虑更多的因素，如错误处理、数据缓存等。希望这篇文章能对你有所帮助！

-- 展开阅读全文 --