如何将浏览器数据传至服务端？Express/Node.js天气应用获取用户经纬度

其实把浏览器里的信息传到服务端，常用的方式有这么几种，你可以根据自己的场景来选：

• 表单提交：这是最传统的方式，在HTML里写个<form>标签，指定请求方法（GET/POST）和服务端接口地址，用户填完内容点击提交，浏览器就会把表单数据打包发送给服务端。在Express里，你可以用req.body（POST请求）或者req.query（GET请求）来获取这些数据。
• AJAX/Fetch 请求：如果不想刷新整个页面，就用这种异步请求方式。浏览器端用JavaScript的fetch（或者老一点的XMLHttpRequest）把数据以JSON或表单格式发给服务端接口，服务端处理完后返回结果，页面可以局部更新，特别适合你做的天气应用这种场景。
• WebSocket：如果需要实时双向通信（比如在线聊天、实时数据监控），可以用WebSocket建立持久连接，之后浏览器和服务端能随时互发消息，但你的天气应用暂时应该用不上这个。

刚好你的场景最适合用Fetch异步请求，我给你一步步写具体的代码实现：

第一步：客户端（HTML+JS）代码 #

先写前端页面，用HTML5的Geolocation API获取用户经纬度，然后通过Fetch把数据POST到服务端的接口：

<!DOCTYPE html>
<html>
<head>
    <title>简易天气应用</title>
</head>
<body>
    <h1>获取你的实时天气</h1>
    <div id="status"></div>
    <div id="weather-result"></div>

    <script>
        // 检查浏览器是否支持地理定位
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(sendLocation, handleLocationError);
        } else {
            document.getElementById('status').textContent = "抱歉，你的浏览器不支持地理定位功能";
        }

        // 成功获取位置后，发送到服务端
        function sendLocation(position) {
            const lat = position.coords.latitude;
            const lon = position.coords.longitude;

            document.getElementById('status').textContent = `已获取你的位置：纬度 ${lat.toFixed(2)}，经度 ${lon.toFixed(2)}`;

            // 用Fetch发送POST请求
            fetch('/api/weather', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ latitude: lat, longitude: lon }),
            })
            .then(res => res.json())
            .then(data => {
                // 展示服务端返回的天气信息
                document.getElementById('weather-result').textContent = `当前天气：${data.description}，气温 ${data.temperature}℃`;
            })
            .catch(err => {
                console.error('发送位置出错：', err);
                document.getElementById('weather-result').textContent = "获取天气信息失败，请稍后重试";
            });
        }

        // 处理定位失败的情况
        function handleLocationError(error) {
            let errorMsg = '';
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    errorMsg = "你拒绝了位置权限请求，无法获取天气信息";
                    break;
                case error.POSITION_UNAVAILABLE:
                    errorMsg = "无法获取你的位置信息";
                    break;
                case error.TIMEOUT:
                    errorMsg = "获取位置超时，请重试";
                    break;
                default:
                    errorMsg = "发生未知错误，无法获取位置";
            }
            document.getElementById('status').textContent = errorMsg;
        }
    </script>
</body>
</html>

第二步：服务端（Express）代码 #

接下来写Express服务端代码，接收客户端传来的经纬度，之后你可以用这个经纬度调用第三方天气API（比如OpenWeatherMap），这里先写基础的接收和返回逻辑：

const express = require('express');
const app = express();
const PORT = 3000;

// 解析JSON格式的请求体
app.use(express.json());

// 托管静态文件（把刚才的HTML页面放在public文件夹里）
app.use(express.static('public'));

// 接收经纬度并返回天气信息的接口
app.post('/api/weather', async (req, res) => {
    const { latitude, longitude } = req.body;
    console.log(`收到用户位置：纬度 ${latitude}，经度 ${longitude}`);

    // 这里可以替换成实际调用天气API的代码，比如：
    // const weatherApiRes = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=你的API密钥`);
    // const weatherData = await weatherApiRes.json();
    // 然后整理数据返回给客户端

    // 先模拟返回天气数据
    res.json({
        description: "晴朗",
        temperature: 26
    });
});

// 启动服务
app.listen(PORT, () => {
    console.log(`服务已启动，访问地址：http://localhost:${PORT}`);
});

运行步骤 #

1. 创建一个public文件夹，把上面的HTML文件保存为index.html放进这个文件夹
2. 初始化Node.js项目：执行npm init -y，然后安装Express：npm install express
3. 把服务端代码保存为server.js，运行node server.js
4. 打开浏览器访问http://localhost:3000，允许位置权限，就能看到效果啦！

内容的提问来源于stack exchange，提问作者Gabe Levin