Как создать ajax POST с узлом JS?

Question

Я не уверен, как использовать ajax POST для POST с Jade-страницы на узел JS. Если кто-то может предоставить пример или сказать мне, чего я не вижу в сценарии, пожалуйста, дайте мне знать.

Это файл сценарий:

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

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

URL, у меня есть для POST на моем app.js файл:

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

Я выкладываю верно для события щелчка на нажмите «Добавить контакт» и измените его на «Запросить контакт», если данные в db отображаются как истинные.

Это файл нефрита:

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 на стороне клиента, чтобы получить некоторые ответ и реагировать на этот ответ соответственно. Если бы это был отдельный запрос на другую страницу - тогда, вероятно, создание всей страницы - был бы фактическим вариантом.

Но поскольку вам просто нужно получить ответ от сервера, а затем обновить свой интерфейс без перезагрузки на основе ответа, тогда вам нужно ответить от сервера на этот запрос POST с помощью некоторого JSON. А затем на стороне клиента, сделайте некоторые шаблоны, используйте 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 }); 
     }); 
};