如何使用节点JS创建ajax POST

How to create a ajax POST with node JS?

本文关键字:ajax POST 创建 JS 何使用 节点      更新时间:2023-09-26

我不知道如何使用ajax POST从Jade页面到Node JS进行POST。如果有人能提供一个例子,或者告诉我我在剧本中遗漏了什么,请告诉我。

这是脚本文件:

  //Add friends
    $('.addContact').click(function() {
    $.post('/addContact',
       {friendRequest: $(this).data('user')});
    if($(this).html!=='Contact Requested') {
        return $(this).html('Contact Requested');
    }
    });  

我在app.js文件上的POST url是:

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

如果数据库中的数据显示为true,我正试图在按钮"添加联系人"上为单击事件发布true,并将其更改为"请求联系人"。

这是玉文件:

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

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

但由于您只需要从服务器获得响应,然后更新前端,而不需要根据响应重新加载,因此您需要从服务器对这个POST请求使用一些JSON进行响应。然后在客户端,进行一些模板化,使用jQuery或客户端的一些模板库。

一切看起来都很好。我只是觉得$.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 });
        });
};