如何实现点击按钮刷新Django页面中树莓派传感器数据？

一、关于Django是否过于复杂的判断 #

如果你只是做一个简单的「传感器数据展示+按钮更新」小项目，Django确实有点“大材小用”——它自带的admin后台、ORM数据库操作等功能你大概率用不上。但如果之后有扩展需求（比如存储历史数据、支持多用户访问），Django的成熟生态会帮你省很多事。要是想轻量化，也可以换Flask甚至直接用Python原生的http.server配合前端AJAX，但既然已经搭了Django，调整下实现逻辑就能解决问题，没必要推倒重来。

二、核心问题：点击按钮数据不更新的解决方法 #

你现在的问题本质是：单独运行数据提取文件后，新数据没传递到前端，或者前端没主动请求新数据。按下面的步骤改：

1. 把传感器采集逻辑整合到Django视图里 #

别单独跑数据提取脚本，直接在视图函数里调用采集代码，这样每次请求页面/接口时，都会重新读取传感器的最新数据。
示例views.py代码：

from django.shortcuts import render
from django.views.decorators.cache import never_cache
# 导入你写的传感器采集模块，比如叫bme280_utils
import bme280_utils

@never_cache  # 禁止缓存，确保每次请求都拿新数据
def sensor_page(request):
    # 每次请求都调用采集函数，获取最新的温湿度、气压
    sensor_data = bme280_utils.get_latest_data()  # 假设这个函数返回字典：{"temperature": 25.3, "humidity": 60, "pressure": 1013}
    return render(request, 'sensor_page.html', {'sensor_data': sensor_data})

2. 前端用AJAX实现无刷新更新（推荐） #

如果点击按钮是整页刷新但数据没更，大概率是浏览器缓存了页面。用AJAX异步请求新数据，既不用刷新整个页面，也能确保拿到最新值。
示例前端HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>BME280传感器数据</title>
    <!-- 用jQuery简化AJAX，也可以用原生JS实现 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
    <!-- 禁止页面缓存 -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
</head>
<body>
    <div class="sensor-display">
        温度: <span id="temp">{{ sensor_data.temperature }}</span>°C<br>
        湿度: <span id="humidity">{{ sensor_data.humidity }}</span>%<br>
        气压: <span id="pressure">{{ sensor_data.pressure }}</span>hPa
    </div>
    <button id="refresh-btn">点击更新数据</button>

    <script>
        $(function() {
            $('#refresh-btn').click(function() {
                // 异步请求后端接口，获取最新数据
                $.get('/sensor-page/', function(data) {
                    // 从返回的HTML里提取新数据
                    $('#temp').text($(data).find('#temp').text());
                    $('#humidity').text($(data).find('#humidity').text());
                    $('#pressure').text($(data).find('#pressure').text());
                });
            });
        });
    </script>
</body>
</html>

3. 进阶：用JSON接口返回数据（更高效） #

上面的方法是请求整个HTML页面再提取数据，更高效的方式是让后端返回纯JSON数据：
首先在views.py里加一个API视图：

from django.http import JsonResponse
import bme280_utils

@never_cache
def sensor_data_api(request):
    sensor_data = bme280_utils.get_latest_data()
    return JsonResponse(sensor_data)

然后在urls.py里添加路由：

from django.urls import path
from . import views

urlpatterns = [
    path('', views.sensor_page, name='sensor_page'),
    path('sensor-api/', views.sensor_data_api, name='sensor_data_api'),
]

最后修改前端AJAX部分：

$(function() {
    $('#refresh-btn').click(function() {
        $.get('/sensor-api/', function(data) {
            $('#temp').text(data.temperature);
            $('#humidity').text(data.humidity);
            $('#pressure').text(data.pressure);
        });
    });
});

4. 排查缓存问题 #

如果按上面改了还是不行，检查这两点：

• 确保Django视图加了@never_cache装饰器，禁止后端缓存响应
• 前端页面加了禁止缓存的meta标签，避免浏览器缓存旧页面

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