Каким образом можно передать переменную из 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 запрос на сервер, передав нужный набор параметров для обработки. <br/> 2. Обработать запрос на серверe, передать клиенту результат. <br/> 3. На JS обработать результат в callback функции ajax. <br/> Примерная заготовка, как это будет на стороне JS: <br/> <pre><code class="javascript">function getValue()
{
  let xhr = new XMLHttpRequest();
  xhr.open("POST", "" /*&lt;- тут должен быть адрес скрипта на сервере, где будет обработка запроса */, 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 &amp;&amp; xhr.status === 200)
     {
         // что-то делаем с ответом, например выводим сообщение
          alert(xhr.responseText);
      }
   };
   // отправляем запрос на сервер, нагружаем его формой с параметрами
   xhr.send(t_form);
}</code></pre>
Ajax (fetch): <br/> <pre><code class="javascript">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);
    }
}</code></pre> <br/> Принимаем и возвращаем, если все ок: <br/> <pre><code class="python">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)</code></pre>
Похожие вопросы