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
相关产品推荐
相关产品推荐

