如何将jQuery获取的表单输入值传递给Flask后端处理函数？

问题修复步骤如下 #

1. 排查404错误

• 确认{{ url_for('calcprice') }}所在的代码是写在.html文件的<script>标签内的，如果是写在独立的.js文件中，Jinja2模板语法不会被解析，会直接把模板语法当字符串请求，导致404。这种情况直接把请求url替换为固定值/calcprice即可。
• 打开浏览器开发者工具的「网络」标签，确认请求的目标地址是否为/calcprice，检查拼写、Flask服务端口是否正确。

2. 修正jQuery取值逻辑

你当前使用的option:selected是下拉框<select>组件的取值写法，你的三个输入项都是普通input组件，直接用.val()即可取值，修改fetchdata函数的参数部分：

function fetchdata() {
    $.getJSON({
        type: "GET",
        url: "{{ url_for('calcprice') }}",
        data: {
            'Income': $('#Income').val(),
            'Percent': $('#percent_income').val(),
            'Rate': $("#interest_rate").val(),
        },
        success: function(data){
            console.log(data)
            // 拿到返回的price后可以在这里写渲染到页面的逻辑
        }
    });
}

3. 优化触发逻辑

原绑定整个document的事件范围太宽，容易重复触发，直接绑定三个输入组件的事件即可：

// 替换原有的mouseup、document change绑定代码
$('#Income, #percent_income, #interest_rate').on('input change', fetchdata);

4. 修正Flask路由逻辑

你当前路由直接返回未定义的price变量，且没有返回标准JSON格式，会导致前端解析失败，修正后的参考代码：

from flask import jsonify, request

@app.route('/calcprice', methods=['GET'])
def calcprice():
    # 直接指定参数类型，自动转数值格式
    income = request.args.get('Income', type=float)
    percent = request.args.get('Percent', type=float)
    rate = request.args.get('Rate', type=float)
    
    # 替换为你自己的房价计算逻辑
    if all([income, percent, rate]):
        # 示例计算逻辑，可自行修改
        monthly_pay = income * (percent / 100)
        year_pay = monthly_pay * 12
        # 按30年贷款、利率折算可负担总房价，仅作示例
        price = year_pay * 30 / (rate / 100)
    else:
        price = 0
    # 返回标准JSON格式
    return jsonify(price=price)

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