Каким образом можно передать переменную из JavaScript в Python с помощью Flask?

Как можно передать значение переменной `value` из JavaScript в Python после того, как оно было получено из `index.html`?
  • 20 февраля 2024 г. 7:18
Ответы на вопрос 3
Для передачи переменной из JavaScript в Python с помощью Flask можно использовать AJAX запросы. 

Примером кода будет следующее:

JavaScript (в файле `index.html`):
```javascript
var value = "значение переменной";
$.ajax({
    type: "POST",
    url: "/send_value",
    data: { value: value },
    success: function(response) {
        console.log("Переменная успешно передана в Python: " + response);
    }
});
```

Python (в файле `app.py`):
```python
from flask import Flask, request

app = Flask(__name)

@app.route('/send_value', methods=['POST'])
def send_value():
    value = request.form['value']
    print("Переменная получена из JavaScript: " + value)
    return 'Успешно получено значение из JavaScript'

if __name__ == '__main__':
    app.run()
```

При выполнении данного кода, переменная `value` будет передана из JavaScript в Python с помощью AJAX запроса и сохранена в переменной `value` в Python-приложении Flask.
1. На JS любым способом сделать ajax запрос на сервер, передав нужный набор параметров для обработки. 
2. Обработать запрос на серверe, передать клиенту результат.
3. На JS обработать результат в callback функции ajax.
Примерная заготовка, как это будет на стороне JS:
function getValue()
{
  let xhr = new XMLHttpRequest();
  xhr.open("POST", "" /*<- тут должен быть адрес скрипта на сервере, где будет обработка запроса */, true);
  // создаем виртуальную форму, чтобы нагрузить запрос параметрами
  let t_form = new FormData();
  // нагружаем параметром форму
  t_form.append("input-id", document.getElementById('input-id').value);
  // ... еще какой-то параметр
  // t_form.append("какой-то параметр", "какое-то значение");
   // callback функция ответа
   xhr.onreadystatechange = function(e)
  {
     // состояние, когда ответ сформирован
     if(xhr.readyState === 4 && xhr.status === 200)
     {
         // что-то делаем с ответом, например выводим сообщение
          alert(xhr.responseText);
      }
   };
   // отправляем запрос на сервер, нагружаем его формой с параметрами
   xhr.send(t_form);
}
Ajax (fetch): 
async function getValue() {
    const input = document.querySelector('#input-id');

    try {
        const res = await fetch('/', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({'value': input.value})
        });

        if (res.ok) {
            console.log('Send success!');
        } else {
            throw new Error(`Send error, ${res.statusText}`);
        }
    } catch (error) {
        console.error('Error', error);
    }
}

Принимаем и возвращаем, если все ок:
from flask import Flask, render_template, request, jsonify
import json

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'GET':
        return render_template('index.html')
    elif request.method == 'POST':
        try:
            data = request.json
            if 'value' in data:
                value = validate(data['value'])
                return jsonify({'message': 'Success!', 'value': value}), 200
            else:
                raise KeyError('Value key not found')
        except (KeyError, json.JSONDecodeError) as e:
            return jsonify({'error': 'Invalid data format'}), 400

def validate(value):
    return value

if __name__ == '__main__':
    app.run(debug=True)
Похожие вопросы