expressJS 中的 AJAX 调用答案

【问题标题】：AJAX call in expressJSexpressJS 中的 AJAX 调用
【发布时间】：2012-09-20 16:02:33
【问题描述】：

我似乎无法正确调用 AJAX。还有其他 QA 处理 $.ajax() 函数，但我试图用 $.post() 解决这个问题。

单击表单按钮时，将执行头部的 javascript，其中包括 $.post()。 url /login 被路由并传递给loginPost 函数。确定响应并将其发送回javascript（对吗？）。相反，网页呈现响应（通过 || 失败）。

为什么 AJAX 调用的响应没有被发回处理？

这是一个简单的示例，我正在使用它来让我更好地了解 expressJS 和 jQuery 中的 AJAX 是如何工作的。任何帮助是极大的赞赏！

--views/login.jade

script(src='/_js/jquery-1.8.2.min.js')
script
  $(document).ready(function(req, res) {
    $('#login').submit(function() {
    var formData = $(this).serialize();
    console.log(formData);
    $.post('/login', formdata, processData).error('ouch');

    function processData(data, status) {
      console.log(status);
      console.log(data);
      if (data == 'pass') {
        $('#content').html('<p>You have successfully loggin in!</p>');
      } else {
        if (! $('#fail').length) {
          $('#formFrame').prepend('<p id="fail">Incorrect login information. Please try again)</p>');
        }
      }
    } //end processData
  }); //end submit
}); //end ready

div.main
h1= title
div#formFrame
  form(id='login', action='/login', method='POST')
p
  label(for='username') Username:
  input(id='username', type='text', name='username')
p
  label(for='password') Password:
  input(id='password', type='password', name='password')
p
  input(id='button', type='submit', name='button', value='Submit')

--routes/index.js

app.post('/login', loginPost);

--路由/loginPost

module.exports.loginPost = function(req, res) {
    var password = 'admin'
      , username = 'user'
      , data = req.body;

    if (data.username == username && data.password == password) {
      res.send('pass');
    } else {
      res.send('fail');
    }
};

【问题讨论】：

当您在浏览器外部以 curl 之类的方式调用 /login 时，它的响应是什么，即 curl -X POST -d "username=blah&password=blah" <host>/login？
username=asdf&password=asdf&button=Submit --> 回复是fail
您是否在app 的配置中包含urlencoded 或bodyParser？
我有 bodyParser 但没有 urlencoded。 This post 说 bodyParser '包装了其他三种方法 - express.json、express.urlencoded 和 express.multipart。'你认为我需要明确说明吗？
@user1460015 不。您应该只需要其中一个。

标签： ajax node.js express

【解决方案1】：

您仍然需要通过其默认操作阻止<form> 提交，这可以通过event.preventDefault() 完成：

$('#login').submit(function(evt) {
  evt.preventDefault();
  // ...
});

否则，<form> 会将页面重定向到其action（如果没有给出action，则返回到当前地址），从而中断$.post 请求。

【讨论】：

做到了。阻止默认操作正确地将 AJAX 请求的响应发送到 processData 函数。