Как во flask отправить данные на сервер с htm документа при нажатии на кнопку не отправляя форму?

Question

[Роман Иванов]

Как во flask отправить данные на сервер с htm документа при нажатии на кнопку не отправляя форму, при том что кнопка сама открывает всплывающую форму (popup) в которой уже после вводятся данные и отправляются обычным способом на сервер?
Кнопки генерируются с помощью Jinja в таблице справа от данных при это кнопка содержит атрибут value и у каждой кнопки значение атрибута разное.
Пробовал разные варианты с request по типу request.args.get('q') и редиректом но там всё сложно получается "велосипед" и при этом не рабочий. Отправка с помощью fetch так же пробовал но с JS не справился и документация написана почти без примеров.
Так как действия происходят в браузере я так понимают отправка должна быть самого значения "value" при помощи JS (но я полный ноль в JS) - и должно быть 2 этапа сначала получить данные с атрибута value а после отправка на сервер.

При нажатии кнопки вызов формы для отправки данных

Код роутинга

@app.route('/add_slab', methods=['GET', 'POST'])
@login_required
def add_slab():
  .................................................
    return render_template("add_slab.html", title='Добавление слябов', user=user, order_client=order_client, slab=slab,
                           form=form)

<tbody>
    {% for sl in slab %}
        <td>
            <button type="submit" class="btn btn-primary"
                    data-bs-toggle="modal" data-bs-target="#ModalAddWorker" name="getid" value="{{sl.id}}">
                Назначить сотрудника
    {% endfor %}

Comments

[Elvis]

самое верное решение fetch\ajax post запросом. Если это сложно - попробуйте еще сложнее, через websocket =)

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента.

[Роман Иванов]

Модератор, исправил

Answer 1

[ragq1991]

Пример рабочего кода на JS, из моего проекта, для асинхронной отправки запроса на сервер с ожиданием ответа.

<script>
        async function returnPaid(id, what_do){
------------------- начало фигни
            if (what_do == 'delete'){
              if (!confirm('Вы действительно хотите удалить запись?')){
                return;
              };
            }
            if (what_do == 'undone'){
              if (!confirm('Вы действительно хотите отменить проведение?')){
                return;
              };
            }
            if (what_do == 'unpaid'){
              if (!confirm('Вы действительно хотите отменить оплату?')){
                return;
              };
            }
------------------- конец фигни
            const body = JSON.stringify({
                    "id": id,
                    "do": what_do,
                })
            const response = await fetch('/api/v1/', {
                method: "POST",
                headers: {"X-CSRFToken": csrftoken, "Content-Type": "application/json", "Accept": "application/json"},
                mode: "same-origin",
                body: body
            })
            const data = await response.json();
            if (data.status_code == 200){
------------------- начало фигни
              if (what_do == 'paid' || what_do == 'unpaid'){
                btnToggle(id, what_do, data.sum_paid);
              } else if (what_do == 'done' & data.auto_paid) {
                btnToggle(id, 'paid', data.sum_paid);
                btnToggle(id, what_do);
              } else {
                btnToggle(id, what_do);
              };
------------------- конец фигни
            } else if (data.status_code == 400){
              alert(data.message);
            };
        }
    </script>

фигню не стер что был пример кода на JS, раз Вы написали " (но я полный ноль в JS) ".