如何使用Ajax将用户名和密码发送到快递服务器？

Question

这是将表单发送到服务器的ajax方法：

$("#submit").click( function() {

    $.ajax({
        url: '/login',
        type: "POST",
        dataType: "html",
        contentType: 'application/x-www-form-urlencoded',
        data: $('#submit-form').serialize(),
        username: $('#username').val(),
        password: $('#password').val(),
        beforeSend: function(xhr) {},
        success: function(data) {               
             console.log('Success');
        },
        error: function(jqXHR, textStatus, errorThrown) {
             // alert('error ' + textStatus + " " + errorThrown);
             console.log(this.data);
             console.log('Error', textStatus, errorThrown);
        }
    });

});

以下是我的index.js：

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.post('/login', function (req, res) {
    console.log('body=', req.body);
    res.end('{"success" : "Success", "status" : 200}');
});

但是我只收到“错误”，有时服务器收到POST，有时没有，我为什么以及如何解决这个问题？

Answer 1

$(this).serialize()应该引用您的表单（例如$('#my-form').serialize() ）。

来自https://api.jquery.com/serialize/

它可以作用于已选择单个表单控件的jQuery对象，例如<input> ， <textarea>和<select>

如果那确实是您的表单并且仍然存在问题，那么错误回调中的textStatus和errorThrown的值是什么？ 请求是否到达console.log('Login request')语句？

以下快速代码对我有用：

...
var app = express()
var bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))

app.post('/login', function (req, res) {
  console.log('body=', req.body)
})
...

使用以下AJAX代码：

$.ajax({
  url: '/login',
  type: "POST",
  dataType: "html",
  data: $('#form').serialize(),
  contentType: 'application/x-www-form-urlencoded',
  username: $('#username').val(),
  password: $('#password').val(),
  beforeSend: function(xhr) {},
  success: function(data) {               
      console.log('Success');
  },
  error: function(jqXHR, textStatus, errorThrown) {
      // alert('error ' + textStatus + " " + errorThrown);
      console.log('Error', textStatus, errorThrown)
  }
})

编辑添加了示例Express和Ajax代码