如何使用节点 JS 创建 ajax POST？

Question

我不确定如何使用 ajax POST 从 Jade 页面 POST 到 Node JS。如果有人可以提供示例或告诉我我的脚本中缺少什么，请告诉我。

这是脚本文件：

  //Add friends
    $('.addContact').click(function() {
    $.post('/addContact',
       {friendRequest: $(this).data('user')});

    if($(this).html!=='Contact Requested') {
        return $(this).html('Contact Requested');
    }
    });  

我的 app.js 文件上的 POST 网址是：

app.post('/addContact', user.addContactPost);

如果数据库中的数据显示为 true，我正在尝试为按钮 Add Contact 上的单击事件发布 true 并将其更改为 Contact Requested。

这是玉文件：

extends layout
block content   
    div
    legend Search Results
    div#userResults
    for user in ufirstName 
        a(href='/user/#{user.id}')
            p #{user.firstName} #{user.lastName}
        button.addContact Add Contact

路由文件是这样的：

    exports.addContactPost = function(req, res, err) {
    User.findByIdAndUpdate(req.signedCookies.userid, {
                $push: {friendRequest: req.body.friendRequest}
            }, function(err) {
                if(err) {
                    console.log("post2");
                    return console.log('error');
                    //return res.render('addContactError', {title: 'Weblio'}); 

                } 

                else {
                    console.log('postsuccess');
                    //alert('Contact added');
                    res.json({response: true});

                }

            });
};

Answer 1

如果您发布 AJAX 请求，那么您期望客户端的 JS 得到一些响应，并相应地对该响应做出反应。 如果它是对另一个页面的单独请求 - 那么可能呈现整个页面 - 将是实际的选择。

但是由于您只需要从服务器获取响应然后更新前端而不根据响应重新加载，因此您需要使用一些 JSON 从服务器响应此 POST 请求。然后在客户端，做一些模板，在客户端使用jQuery或一些模板库。

Answer 2

一切看起来都不错，我只是觉得 $.post 代码有点不对劲。这可能会解决您的问题。

 $('.addContact').click(function() {
    $.post('/addContact', { addContact : true }, function(data){
        console.log('posting...');
        $('.addContact').html(data);
    });

    ...
});

我添加到 $.post 的对象是要发送到服务器的对象。您最后指定的函数是您的回调。它会在函数返回时被调用。我想这可能是你的一些困惑。

你的节点路由应该是这样的

exports.addContactPost = function(req, res, err) {
    User.findByIdAndUpdate(req.signedCookies.userid,{
            addContact: req.body.addContact
        }, function(err) {
            if(err) {
                console.log("post2");
                res.render('addContactError', {title: 'Weblio'}); 
            } 
            //assuming express return a json object to update your button
            res.json({ response  : true });
        });
};