Как использовать Connect-Flash с AJAX

У меня есть страница с формой, которая отправляет изменения в локальную конечную точку через AJAX ($.post). Я хочу показать пользователю сообщение, хорошо это или плохо. Но я не могу заставить его работать. Вот что у меня так далеко:

нефритовый шаблон (отрывок)

if message
    .alert.alert-danger= message


// Tab panes
.tab-content

    #admin-tab-profile.tab-pane.active(role='tabpanel')
        h3 Profil
        form
            include partials/admin/profile

main.js (отрывок)

app.post('/admin', function(req, res) {
    var data = req.body;

    // find profile
    profile.findById(data._id, function(err, profile) {

        // update
        profile.summary.da = data.da;
        profile.summary.en = data.en;

        // save
        profile.save(function(err) {
            if (err) {
                req.flash('loginMessage', 'Oops! Something went wrong.');

                res.status(500).send( { message: req.flash('loginMessage') } );
            }
            console.log("profile sucessfully updated");
            req.flash('loginMessage', 'Yes! Everythings good!');
            res.status(200).send( { message: req.flash('loginMessage') } );
        });
    });
});

app.js (отрывок)

app.use(flash()); // use connect-flash for flash messages stored in session

Так что я делаю не так? Почему не отображаются сообщения о состоянии при публикации данных?

Источник

1 ответ

Хорошо, если вы используете ajax, вам не нужно использовать экспресс-флеш-сообщения, вы можете просто использовать метод ajax.success:

        $.ajax({
            method:'post',
            ulr: '/user/singup',
            data: data,
            success: function(msg) {
                console.log('Success!!');
                console.log(msg);  // loginMessage from your code
            },
            error: function(){
                console.log('Error!!');
            }
        })

И отправьте код статуса из вашего почтового метода в экспресс:

res.status(200).send( { message: 'loginMessage' } );
Источник

Мне это удалось. Я сделал так, как здесь:https://www.npmjs.com/package/express-messages

   <body>
   <%- messages('my_message_template', locals) %>
   <div id="messages">
     <% Object.keys(messages).forEach(function (type) { %>
       <% messages[type].forEach(function (message) { %>
         <div class="alert alert-<%= type%>">
           <%= message %>
         </div>
       <% }) %>
     <% }) %>
   </div>

И в $.ajax({ success:... Я поставил эту строку:

$('#messages').load(location.href + " #messages");

Итак, если действие ajax было успешным, оно обновляло div, который id = messages.

В экспрессе у меня есть эта строка:

res.status(200).json({ messages: req.flash('success','Yes! Everythings good')});

В приведенной выше ссылке указывается <% = type%> (ejs), если сообщение является успешным или ошибочным (т.е.), и для этого стиль, например:

<style>
      .alert-success{
        color: #3c763d;
        background-color: #dff0d8;
        border-color: #d6e9c6;
      }
      .alert-error{
        color: #a94442;
        background-color: #f2dede;
        border-color: #ebccd1;
      }
</style>

Это окрашивает фон в зеленый цвет, если сообщение "успех" или красный, если это "ошибка".

Источник
Другие вопросы по тегам