Изменение переменной на странице, когда приходит post запрос(Flask)

Question

День добрый! Есть накая страничка, на ней есть кнопки, которые отправляют post запрос на сервер. Суть в том, что данные доходят, я их обрабатываю, пытаюсь вывести на страничку, но ничего не происходит, код обработки:

app.route('/client', methods=['post', 'get'])
def client():
    column = ['Название','Кол-во','Действие']
    db = database('../DB/main.db')
    category = [el for el, _ in groupby(db.get_all_info_into_table('WAREHOUSE', ['type']))]
    if request.method == 'POST':
        table = list(db.get_info_into_db('WAREHOUSE', 'type', request.get_data().decode('utf-8')))
        logger.debug(table)
        logger.debug('RENDERING') 
    elif request.method == 'GET':
        table = []
    logger.debug(table)
    return render_template('warehouse_client.html', category_name = category,сolumn_name = column , products = table)

Вот тут делал проверку, что выводит, в итоге выводило пустой список:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Склад</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
        <a class="nav-item nav-link" href="#">Главная <span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link" href="#">Выдача товаров</a>
        <a class="nav-item nav-link" href="http://127.0.0.1:5000/add_user">Добавить пользователя</a>
        {{products}}
    </div>
</div>
</nav>

Почти день угробил на эту ошибку, может кто направит на путь верный)

Answer 1

Разобрался, для изменения данных на уже загруженной странице, нужно юзать JS, пример:

 <script type="text/javascript" charset="utf-8">
        function send_post(text){
            var xhr = new XMLHttpRequest();
            var obj
            console.log(text)
            // 2. Конфигурируем его: POST-запрос на URL
            xhr.open('POST', адрес куда отправить запрос', false);

            // 3. Отсылаем запрос
            xhr.send([text]);
            if (xhr.status != 200) {
                console.log('Error');
            } else {
                document.getElementById("table_info").innerHTML = '';
                console.log('response: ', xhr.responseText);
                obj = JSON.parse(xhr.responseText);
                console.log(Object.keys(obj['warehouse_info']).length)
                for (var i = 0; i < Object.keys(obj['warehouse_info']).length + 1; i++){
                    document.getElementById("table_info").innerHTML += "<tr><td id='name'>"+obj['warehouse_info'][i][0]+"</td><td id='count'>"+obj['warehouse_info'][i][1]+"</td><td><a>Заказать</a></td><tr>";
                }
            }
            };
    </script>

В данном скрипте отправляет POST запрос на сервер, далее сервер его обрабатывает, если статус запроса 200(успешно), то сервер отправляет в ответку JSON файл:

if request.method == 'POST':
    return jsonify({"warehouse_info":warehouse_info})

Далее просто JS скриптом, который я приложил выше, генерируем данные в табличку.

БИНГО!

БЛОГ НА HUSL

Изменение переменной на странице, когда приходит post запрос(Flask)

Ответы (1 шт):