Django网页中如何通过按钮调用DHT11类的read_values方法并展示返回值

实现方案 #

是否需要WebSockets？ #

不需要。你的需求是用户主动点击按钮才触发数据读取，用普通HTTP请求即可满足，WebSockets仅适合需要服务端主动实时推送数据的场景（比如传感器数据自动定时刷新无需用户操作），对你当前的需求属于过度设计。

实现步骤 #

1. 修复现有代码的已知问题

你现有read_values方法里的状态判断逻辑有误：Adafruit_DHT读取失败时返回的是None而非0，所以需要修改判断逻辑，同时注意调用方法后要手动保存实例到数据库：

def read_values(self):
    self.humidity, self.temperature = Adafruit_DHT.read(self.dht_sensor, self.pin)
    # 修改判断逻辑
    if self.humidity is not None and self.temperature is not None:
        self.status = True
    else:
        self.status = False
        # 读取失败时可以重置数值避免显示旧数据
        self.humidity = 0
        self.temperature = 0
    time.sleep(delay)

2. 新增处理读取请求的路由

在你的APP的urls.py中新增路由：

urlpatterns = [
    # 原有其他路由
    path('dht/<int:dht_id>/', views.dht, name='dht_detail'),
    path('dht/<int:dht_id>/read/', views.read_dht, name='read_dht'),
]

3. 新增读取传感器的视图函数

在views.py中添加对应逻辑：

from django.shortcuts import get_object_or_404, redirect

def read_dht(request, dht_id):
    dht = get_object_or_404(DHT11, pk=dht_id)
    if request.method == "POST":
        dht.read_values()
        dht.save() # 将读取到的新数值保存到数据库
    # 重定向回传感器详情页，刷新显示新数据
    return redirect('dht_detail', dht_id=dht_id)

4. 模板页添加按钮

在你的sensors/dht.html模板中，添加提交按钮的表单，同时展示温湿度数值：

<!-- 原有展示传感器属性的代码 -->
<div>
    <p>传感器名称：{{ dht.name }}</p>
    <p>绑定引脚：{{ dht.pin }}</p>
    <p>当前温度：{{ dht.temperature }} ℃</p>
    <p>当前湿度：{{ dht.humidity }} %</p>
    <p>运行状态：{% if dht.status %}正常{% else %}读取失败{% endif %}</p>
</div>

<!-- 新增读取按钮表单 -->
<form method="post" action="{% url 'read_dht' dht.id %}">
    {% csrf_token %}
    <button type="submit">读取最新温湿度</button>
</form>

可选优化：无刷新更新数据 #

如果不想点击按钮后刷新整个页面，可以用AJAX实现：

1. 修改read_dht视图，支持返回JSON数据
2. 给按钮绑定点击事件，发送POST请求后拿到返回的温湿度数值，直接更新页面对应元素的内容即可。

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