Question

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

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

Answer 1

如果你使用ajax你不必使用快速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!!');
            }
        })

并从快递方式发送状态代码：

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

Answer 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')});

在上面的链接中，它指出<％= type％>（ejs）是消息是成功还是错误（即），其样式为：

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

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

如何使用connect-flash与ajax

2 个答案: