You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Django BMI计算器点击计算按钮后不显示结果求助

Django BMI计算器点击「Calculate」无结果的排查与修复

1. 视图函数的核心错误

你的views.py存在两处致命问题:

  • 参数混用:视图参数用了response,但返回render时调用了未定义的request,这会直接触发异常,导致页面无法正常处理POST请求。
  • 表单未实例化:GET请求分支里form = BMIform只是引用了表单类,没有创建实例,会导致模板渲染表单失败。

修复后的views.py:

def calculate(request):  # 统一使用request作为视图参数
    if request.method == "POST":
        form = BMIform(request.POST)
        if form.is_valid():
            weight = form.cleaned_data["weight"]
            height = form.cleaned_data["height"]
            bmi = weight / height ** 2
            return render(request, "main/calculate.html", 
                          {"form": form, "bmi": bmi})
    else: 
        form = BMIform()  # 实例化表单类
    return render(request, "main/calculate.html", {"form": form})

2. HTML模板的表单结构问题

当前模板缺少表单起始标签,导致点击按钮时无法发送POST请求,同时还有两处语法小错误:

  • 没有<form method="POST">包裹表单内容
  • CSS里color: white);多了一个右括号
  • BMI结果的<h5>标签用了</h4>闭合,标签不匹配

修复后的HTML模板:

{% extends 'main/base.html' %}
{% block content %}
<h1><center>Calculate your BMI</center></h1>

<style>
    .btn-primary {
        background-color: rgb(82, 200, 216);
        color: black;
        border: none;
    }
    .btn-primary:hover {
        background-color: rgb(0, 128, 145);
        color: white;  <!-- 移除多余的右括号 -->
    }
</style>
<form method="POST">  <!-- 添加表单起始标签,指定请求方法 -->
    {% csrf_token %}
    {{ form }}
    <div class="form-group col-md-4">
        <button type="submit" name="calculate" class="btn btn-primary">Calculate</button>
    </div>
    {% if bmi %}
        <div class="form-group col-md-4">
            <h5>BMI: {{bmi}}</h5>  <!-- 修正标签闭合 -->
        </div>
    {% endif %}
</form>
{% endblock %}

3. 模型类的潜在问题(不影响当前功能,但建议修复)

models.py里的bmi方法没有用self访问实例属性,后续如果调用模型实例的bmi()方法会触发NameError,修复如下:

class BMImodel(models.Model):
    weight = models.FloatField()
    height = models.FloatField()
    
    def bmi(self):
        return self.weight / self.height ** 2  # 添加self.访问实例属性

额外排查步骤

  • 查看Django终端日志,确认是否有异常抛出(比如之前的request未定义错误)
  • 打开浏览器控制台,检查是否有CSS/JS语法报错
  • 查看网络请求记录,确认点击按钮时是否发送了POST请求,以及参数是否正确

内容的提问来源于stack exchange,提问作者Piotr

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.30 21:23:18