Блог

Главная - Вопросы по программированию - Как вы отправляете post-запрос значения ползунков при его изменении в Flask?

Как вы отправляете post-запрос значения ползунков при его изменении в Flask?

#python #flask

#python #flask

Вопрос:

У меня есть приложение flask, которое должно получать значение ползунка в index.html постоянно, но я не уверен, как получить доступ к переменной в файле flask.

The app.py файл flask:

 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 amp;amp; current <= 66){
                    output.innerHTML = 'Neutral';
                    current = 'neutral'  
                }
                else if (current > 66){
                    output.innerHTML = 'Drive';
                    current = 'drive'
                }
            }

        </script> 


    </form>
</body>

Я пробовал много разных вещей, поэтому некоторые вещи в коде могут остаться от этих попыток, но основной вопрос заключается в том, как мне получить доступ к этой переменной html current в моем файле python?

Ответ №1:

Вам нужно будет сделать вызов на сервер, где вы будете обрабатывать это значение (и, возможно, что-то сделать с ним на сервере, затем вернуть его в браузер, где вы могли бы отобразить его каким-то образом).

 
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 amp;amp; 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>

Вы увидите значения, напечатанные в журнале сервера.