Question

我有一个带有滑块的HTML，我试图将这些滑块的值添加到我的flask应用程序中：

HTML

<form method="POST">
<div class="slidecontainer" id="slide_container_f">
<p>Faturamento:<span id="demo"></span></p>
<input type="range" min={{min}} max={{max}} value={{max}} class="slider" id="myRange" name="faturamento">
</div>
</form>

烧瓶应用程序

@app.route('/modelos',methods=['GET','POST'])
def modelos():
#to listen from slider
    faturamento=''
    if request.method == 'POST':
        faturamento=request.form['faturamento']
    return render_template("modelos.html",min=0,max=100)

但是，永远不会使用滑块的值来更新faturamento。您能否向我提示为什么我无法检索这些值？

Answer 1

您缺少表单中的提交按钮，无法将表单提交到服务器。您如何将表单提交到服务器？

HTML应该看起来像

<form method="POST" action="{{url_for('modelos')}}">
    <div class="slidecontainer" id="slide_container_f">
    <p>Faturamento:<span id="demo"></span></p>
    <input type="range" min={{min}} max={{max}} value={{max}} class="slider" 
        id="myRange" name="faturamento">
    <input type="submit" value="Submit">
    </div>
</form>

点击“提交”时，faturamento变量在烧瓶路径中的值是多少？您可以打印出来看看值是多少吗？没有吗？是一个空字符串吗？

更新

如果您不想使用“提交”按钮，则每当滑块更改时，都应使用AJAX调用与服务器进行通信

JS代码

$(function(){
    var form = $('form');
    $('#myRange').on('change mouseup', function(){
        $.ajax({
            type: "POST",
            url: form.action,
            data: form.serialize(),
        }).done(function(res){
            //do something with the response from the server
        });
    });
});

每当释放鼠标时滑块发生变化，它将向您的modelos路由发出AJAX调用，并且faturamento的值应为滑块的当前值。

将html表单中的滑块值导入flask应用程序

1 个答案: