AJAX 表单请求未发送到 Express Web 服务器

Question

我开始学习 Expressjs、Twitter Bootstrap 和 BackBonejs。 我已经使用命令行工具创建了基本的 Expressjs 应用程序，并为登录表单添加了一个 index.html。当用户单击附加了事件的“登录”按钮时，我检索表单信息并对“/登录”路由进行 ajax 调用，但它不起作用..

这里是必要文件的列表：

• index.html
• login.js
• server.js
• routes.js

感谢您的帮助。

Answer 1

一方面，您需要防止按钮单击的默认操作：

$('#btn-login').click(function () {
  // ...
});

// should accept the passed event and `prevenDefault`, like...

$('#btn-login').click(function (e) {
  e.preventDefault();
  // ...
});

Answer 2

问题是表单仍然通过重定向提交，因为这是它的默认行为，并且没有被指示这样做。而且，由于重定向，浏览器正在中止 Ajax 请求。

为防止重定向，您需要绑定到<form> 的.submit() event 并使用event.preventDefault()：

$(document).ready(function () {
    $('#login-form').submit(function (e) {
        e.preventDefault();
    });
});

将这个事件用于 Ajax 而不是 <button> 的 .click() 也可能是值得的，因为除了单击 type="submit" 按钮之外，许多浏览器还允许通过其他操作提交（例如，按 Enter 当焦点位于 <input type="text">) 上时：

$(document).ready(function () {
    $('#login-form').submit(function (e) {
        e.preventDefault();

        var _login = $('#login').val(),
            _password = CryptoJS.SHA512($('#password').val()),
            _remember = $('input:checkbox:checked').val() ? 1 : 0;

        // etc.
    });
});