Question

我在表单提交时调用了ajax请求。这个想法是在没有页面重新加载的情况下保存用户的帐户信息，并给他们一个方便的flash消息，让他们知道保存是否成功。我没有保存数据的问题，但我做在避免POST上的重定向时遇到了问题（带有响应数据的白页）。这就是我所拥有的：

在我的Jade视图中

$("form").on("submit", function (e) {
        e.preventDefault(); // prevent page reload
        $ajax({
            type: "POST",
            url: '/account', 
            data: $("#accountForm").serialize(),
            success: function() {
                // can req.flash even be used here? How might it be?
                req.flash('info', {msg: 'Your profile has been updated!'});
            }
        }
}

在我的控制器中

exports.postAccount = function(req, res, next) {

    var userData = req.body;
    userData.id = req.user.user_id;

    var updateUserCallback = function(err) {
         // This is where everything falls apart
         // Theoretically this should run the success handler in the ajax response
         res.json(true);
         // Any response I send changes the view to a white page with the data, e.g.
         // res.send(anyData);
         // Flash also doesn't seem to work, which seems weird...
         req.flash('info', {msg: 'Your profile has been updated!'});
    }
    // Successfully saves the data, no problems here
    UserModel.updateUser(userData, updateUserCallback);
};

通常在updateUserCallback中，我只是呈现帐户视图，但这违背了ajax的目的。我希望在没有页面重新加载/重定向的情况下保存用户的数据，同时让他们知道ajax功能是通过req.flash（闪存模块）成功完成（或者没有）。

基本上，任何res.send()或res.json()调用都会将该数据放入纯白页（无视图）。我想我从根本上误解了ajax是如何工作的，但是我已经在Node中跟踪了jQuery ajax调用的其他例子，并且无法避免白页＆＃39;问题

Answer 1

节点：

var updateUserCallback = function(err) {
     return res.send({
         message: "Your profile has been updated"
     });
}

客户端JS：

success: function(response) {
     // can req.flash even be used here? How might it be?
     // Nope
     //req.flash('info', {msg: 'Your profile has been updated!'});
     $('#someModal').show().html(response.message); // just a sample implementation
}

Answer 2

您可以使用简单的按钮单击，而不是使用表单提交，这样就不会重新加载页面。

节点中的Ajax请求 - 避免页面重新加载

2 个答案: