无刷新提交表单返回响应：BMR计算器页面内展示结果问题

解决方案：用AJAX实现无刷新表单提交 #

哥们，我懂你说的这个问题——表单提交就跳页确实很烦，咱们用AJAX就能搞定无刷新计算，直接在原页面出结果。我给你把代码补全并修改好，分步骤说：

1. 完善Django视图函数（views.py） #

首先把你没写完的MyBmr函数补全，再加个AJAX请求的判断，让它返回JSON格式的计算结果，而不是跳转页面：

from django.http import JsonResponse
from django.shortcuts import render
from .forms import BmrForm  # 确保你已经在forms.py里定义了BmrForm

def bmrvalue(age, height, weight, gender):
    if gender == 'm':
        BMR = (10 * weight) + (6.25 * height) - (5 * age) + 5
    else:
        BMR = (10 * weight) + (6.25 * height) - (5 * age) - 161
    return BMR

def MyBmr(request):
    if request.method == "POST":
        form = BmrForm(request.POST)
        if form.is_valid():
            # 从表单里取出验证后的参数
            age = form.cleaned_data.get('age')
            height = form.cleaned_data.get('height')
            weight = form.cleaned_data.get('weight')
            gender = form.cleaned_data.get('gender')
            
            # 计算BMR值
            bmr_result = bmrvalue(age, height, weight, gender)
            
            # 判断是否是AJAX请求（前端会加标记）
            if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
                # 返回JSON格式的结果
                return JsonResponse({'bmr': round(bmr_result, 2)})
    
    # GET请求时返回空表单
    form = BmrForm()
    return render(request, 'bmr_calculator.html', {'form': form})

2. 修改前端模板页面（比如bmr_calculator.html） #

给表单加个ID，再加个结果显示区域，最后写一段JS监听表单提交事件，阻止默认跳转，用AJAX发请求并展示结果：

<!-- 表单区域 -->
<form id="bmr-form" method="POST">
    {% csrf_token %}
    {{ form.as_p }}  <!-- 这里会渲染你的表单字段，也可以手动写input标签 -->
    <button type="submit">计算我的BMR</button>
</form>

<!-- 结果展示区域 -->
<div id="bmr-result" style="margin-top: 20px; font-size: 1.2em; font-weight: 500;"></div>

<script>
// 监听表单提交事件
document.getElementById('bmr-form').addEventListener('submit', function(e) {
    // 阻止表单默认的跳转行为
    e.preventDefault();
    
    // 收集表单数据
    const formData = new FormData(this);
    
    // 发送AJAX请求
    fetch('{% url "my_bmr" %}', {  // 替换成你在urls.py里给MyBmr视图设置的name
        method: 'POST',
        headers: {
            // 标记这是AJAX请求，让视图识别
            'X-Requested-With': 'XMLHttpRequest',
            // 带上CSRF令牌，避免Django的CSRF验证错误
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        // 把结果展示在页面上
        document.getElementById('bmr-result').innerHTML = `你的基础代谢率是：<strong>${data.bmr}</strong> 千卡/天`;
    })
    .catch(error => {
        console.error('计算出错:', error);
        document.getElementById('bmr-result').innerHTML = '<span style="color: red;">输入有误，请检查后重试</span>';
    });
});
</script>

3. 关键注意点 #

• 确保你的urls.py里给MyBmr视图设置了正确的URL名称，比如：

  path('bmr/', views.MyBmr, name='my_bmr'),
  

• 你的BmrForm里必须包含age、height、weight、gender这几个字段，否则cleaned_data拿不到值
• 如果习惯用jQuery，也可以把JS部分换成jQuery的$.ajax方法，逻辑是一样的

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