如何在 ajax 中使用 connect-flash答案

【问题标题】：how to use connect-flash with ajax如何在 ajax 中使用 connect-flash
【发布时间】：2020-11-09 22:08:52
【问题描述】：

我有一个带有表单的页面，该表单通过 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

那我做错了什么？为什么发布数据时不显示状态消息？

【问题讨论】：

标签： ajax express connect-flash

【解决方案1】：

如果你使用 ajax 你不必使用 express flash 消息，你可以简单地使用 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!!');
            }
        })

并从您的 post 方法以 express 发送状态码：

res.status(200).send( { message: 'loginMessage' } );

【讨论】：

谢谢。我现在使用 toastr 插件 (github.com/CodeSeven/toastr)。我加载脚本和css。然后我使用 ajax 回调来激活 toast。从 jQuery 3.0 开始，它们被称为“完成”而不是“成功”和“失败”而不是“错误”。

【解决方案2】：

我设法做到了。我把它和这里一样： 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 操作成功，它会刷新 id = messages 的 div。

在快递我有这行：

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

在上面的链接中，它说明 (ejs) 消息是成功还是错误（ie），并且样式是 ie：

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

如果消息为“成功”，则将背景颜色为绿色，如果消息为“错误”，则将背景颜色为红色

【讨论】：