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

Question

This is the ajax method to send the form to server:

$("#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);
        }
    });

});

The following is my 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}');
});

But i'm only getting 'Error' and sometimes the server gets the POST and sometimes not, why and how can i fix this?

Answer 1

$(this).serialize() should be referencing your form (eg, $('#my-form').serialize() ).

from https://api.jquery.com/serialize/

It can act on a jQuery object that has selected individual form controls, such as <input> , <textarea> , and <select>

if that is indeed your form and you still have issues, what is the value of textStatus and errorThrown in the error callback? does the request reach the console.log('Login request') statement?

the following express code works for me:

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

with the following AJAX code:

$.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)
  }
})

EDIT added sample express & ajax code