当滑块值在Flask中发生变化时，如何发送滑块值的post请求？

2024-04-19 07:12:48 发布

您现在位置：Python中文网/ 问答频道 /正文
1376 3

我有一个flask应用程序，它应该不断接收index.html中滑块的值，但我不确定如何访问flask文件中的变量

app.py烧瓶文件：

app = Flask(__name__)

@app.route('/', methods=('GET', 'POST'))

@app.route('/index', methods=['POST', 'GET'])
def index():
    if request.method == 'POST':
        current = request.form['current']
        print(current)
        return render_template('index.html')

    return render_template('index.html')

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)

html文件：

<body>
    <form method = 'POST'>
    <div class="rangeslider"> 
        <input type="range" min="1" max="100" value="50" class="myslider" id="sliderRange"> 
        <p>
            <span id="demo"></span>
        </p> 
    </div> 
        
        <script> 
            const Http = new XMLHttpRequest();
            var rangeslider = document.getElementById("sliderRange"); 
            var output = document.getElementById("demo"); 
            var current;
                        
            rangeslider.oninput = function() {
                current = this.value;
                
                if (current < 33){
                    output.innerHTML = 'Reverse';
                    current = 'reverse'
                    }
                else if (current >= 33 && current <= 66){
                    output.innerHTML = 'Neutral';
                    current = 'neutral'  
                }
                else if (current > 66){
                    output.innerHTML = 'Drive';
                    current = 'drive'
                }
            }

        </script> 


    </form>
</body>

我尝试了很多不同的方法，因此代码中的一些东西可能是这些尝试留下的，但基本问题是，如何访问python文件中当前的html变量


Tags： 文件nameformappflaskoutputindexif
1条回答
网友
1楼 · 发布于 2024-04-19 07:12:48

您需要调用服务器，在服务器上处理此值（可能在服务器上对其执行某些操作，然后将其返回到浏览器，在那里您可能会以某种方式显示它）


from flask import Flask
from flask import request
from flask import render_template


app = Flask(__name__)

@app.route('/', methods=('GET', 'POST'))

@app.route('/index', methods=['POST', 'GET'])
def index():
    if request.method == 'POST':
        current = request.form['current']
        print(current)
        return render_template('index.html')

    return render_template('index.html')

# I've added this method to receive slider updates
@app.route('/slider_update', methods=['POST', 'GET'])
def slider():
    received_data = request.data
    print(received_data)
    return received_data

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)

这是对服务器的调用

<body>
    <form method = 'POST'>
    <div class="rangeslider"> 
        <input type="range" min="1" max="100" value="50" class="myslider" id="sliderRange"> 
        <p>
            <span id="demo"></span>
        </p> 
    </div> 
        
        <script> 
            const Http = new XMLHttpRequest();
            var rangeslider = document.getElementById("sliderRange"); 
            var output = document.getElementById("demo"); 
            var current;
                        
            rangeslider.oninput = function() {
                current = this.value;
                
                if (current < 33){
                    output.innerHTML = 'Reverse';
                    current = 'reverse'
                    }
                else if (current >= 33 && current <= 66){
                    output.innerHTML = 'Neutral';
                    current = 'neutral'  
                }
                else if (current > 66){
                    output.innerHTML = 'Drive';
                    current = 'drive'
                }
            
                // I've added this call to the server, which send 'current' value
                Http.open('POST', '/slider_update')
                Http.send(current)

            }

        </script> 


    </form>
</body>

您将看到服务器日志中打印的值

相关问题 更多 >

    编程相关推荐