如何将输入从 jQuery 传递到 Flask？答案

【问题标题】：How do I pass inputs from jQuery to Flask?如何将输入从 jQuery 传递到 Flask？
【发布时间】：2021-12-23 07:58:15
【问题描述】：

我有三个输入，我试图将值从 Flask 中呈现的 index.html 传递回我的应用程序内的函数。

这里是输入：

<form method="POST" action="/">
                <small>What is your gross income? <BR></small>
                <input type="number" id="Income"><BR><BR>

                <div class="slidecontainer">
                    <small> What  % of income for house payment?</small><BR>
                    <input type="range" min="10" max="60" value="28" class="slider" id="percent_income" step="1"><BR>
                    <small><label> Percent: <span id="Percent"></span>%</label></small>
                </div>

                <div class="slidecontainer">
                    <small> What is your interest rate?</small><BR>
                    <input type="range" min="2" max="6" value="3.5" class="slider" id="interest_rate" step=".25"><BR>
                    <small><label> Rate: <span id="Rate"></span>%</label></small>
                </div>

            </form>

这是在页面上分配和呈现它们的值的脚本（用于收入滑块的比率和百分比）以及我尝试传递值的开始。

$(function() {
            var slider3 = $("#interest_rate");
            $("#Rate").html(slider3.val());

            slider3.change(function() {
            $("#Rate").html(slider3.val());
            })

            var slider4 = $("#percent_income");
            $("#Percent").html(slider4.val());

            slider4.change(function() {
            $("#Percent").html(slider4.val());
            })
        });

function fetchdata()
            {
                $.getJSON({
                    type: "GET",
                    url: "{{ url_for('calcprice') }}",
                    data: {
                        'Income': $('#Income option:selected').html(),
                        'Percent': $('#percent_income option:selected').html(),
                        'Rate': $("#interest_rate option:selected").html(),
                    },
                    success: function(data){
                        console.log(data)
                    }
                });
            }

            $(document).mouseup(function () {fetchdata()});
            $(document).on('change', function () {fetchdata()});

这是我开始尝试从中传递值/请求值的路线，但我有点卡住，是 jQuery 的新手，当我更改值时出现 404 错误。在循环中运行，试图解析正在发生的事情，而不是。任何建议表示赞赏！

@app.route('/calcprice', methods=['GET', 'POST'])
def calcprice():
    Income = request.args.get('Income')
    Percent = request.args.get('Percent')
    Rate = request.args.get('Rate')
    return price

【问题讨论】：

您真的想弄清楚问题是出在前端还是后端（烧瓶）。如果您在fetchdata 的开头运行JQuery sn -p console.log($('#Income option:selected').html())，您会得到什么值？我希望你会想要使用$('#Income').val()
谢谢。这极大地帮助了我，并引导我走上了能够找到答案的道路。
我似乎无法将您的问题标记为答案，但如果可以的话，我会的。

标签： python jquery flask

【解决方案1】：

要使用 JQuery 从输入字段中获取值，请尝试以下操作：$('#{Id_of_input_field}').val()

在您的示例中，它看起来像：

$.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)
    }
});

【讨论】：