1 Тема від yurabes

  • yurabes
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 29.07.2021
  • Повідомлень: 1
    • Репутація: 0

Тема: Передача flash повідомлення на flask + ajax

Всіх вітаю!

В зв'язку з відсутністю досвіду по ajax застопорився на місці...

Ось код flash:

{% for cat, msg in get_flashed_messages(True) %}
<div id="hideMe" class="flash {{cat}}">{{msg}}</div>
{% endfor %}

Ось javascript:

<script>
$(document).ready(function(){
    $("#reset").click(function(){
    $.ajax({
        type: "POST",
        url: '/reset',
        async: false,
        data: $(this).serialize(),
        success: function(data){
             $('#hideMe').html(data);
        }
    });
    return true;
    });
});
</script>

Сама форма:

            <form id="reset">
            <button type="button" class="reset">
                <img src="/static/reset2.png" style="width: 100%;" /><br>Reset
            </button>
                <input type="hidden" name="server_ident" value="{{server.server_ident}}">
                <input type="hidden" name="reset" value="reset">
            </form>

Дані з форми (server_ident, reset ) успішно передаються на бекенд, обробляються і визивається:

flash('текст', category='success')

Так от потрібна допомога, як flash повідомлення вивести на фронтенді *DONT_KNOW*

2 Відповідь від frz

  • frz
  • frz
  • Data / DB Engineer
  • Поза форумом
  • Звідки: PL
  • Дата реєстрації: 28.12.2019
  • Повідомлень: 6 805

Re: Передача flash повідомлення на flask + ajax

GPT-4 написав:

Щоб вивести flash повідомлення на фронтенді, потрібно змінити ваш код JavaScript та HTML-код. Ось змінений код:

HTML:

<div id="flash-container"></div>

<form id="reset">
    <button type="button" class="reset">
        <img src="/static/reset2.png" style="width: 100%;" /><br>Reset
    </button>
    <input type="hidden" name="server_ident" value="{{server.server_ident}}">
    <input type="hidden" name="reset" value="reset">
</form>

JavaScript:

$(document).ready(function(){
    $(".reset").click(function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: '/reset',
            data: $("#reset").serialize(),
            success: function(data){
                // Очистити контейнер повідомлень
                $('#flash-container').empty();

                // Проаналізувати отримані дані
                let response = JSON.parse(data);

                // Якщо відповідь містить flash повідомлення
                if (response.flash) {
                    // Додати повідомлення до контейнера
                    $('#flash-container').append(`<div id="hideMe" class="flash ${response.flash.category}">${response.flash.message}</div>`);

                    // Приховати повідомлення через певний час
                    setTimeout(function() {
                        $('#hideMe').fadeOut('slow');
                    }, 5000);
                }
            }
        });
        return false;
    });
});

На бекенді змініть код таким чином, щоб він повертав JSON-відповідь з ключами 'category' та 'message':

from flask import jsonify

# ...

@app.route('/reset', methods=['POST'])
def reset():
    # Обробка даних
    # ...

    flash_message = {'category': 'success', 'message': 'текст'}
    return jsonify(flash=flash_message)

Тепер коли користувач натисне кнопку "Reset", запит буде відправлений на бекенд, і якщо відбудеться успішна обробка даних, flash повідомлення буде отримано від сервера і відображено на фронтенді. Після 5 секунд повідомлення зникне.

frz вебсайт