AJAX call in expressJS

Question

I can't seem to get the AJAX call correct. There have been other QA that deal with the $.ajax() function but I'm trying to solve this with $.post().

When the form button is clicked the javascript at the head is executed, which includes a $.post(). The url /login is routed through and passed to loginPost function. There a response is determined and sent back to the javascript (right?). Instead, webpage renders the response (pass || fail).

Why isn't the response from the AJAX call being sent back to get processed?

This is a simple example that I am working with to get me better acquainted to how AJAX in expressJS and jQuery work. Any Help is greatly appreciated!

--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);

--routes/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');
    }
};

What is the response to `/login` when you call it outside a browser in something like curl, i.e. `curl -X POST -d "username=blah&password=blah" /login`? — matt b, Sep 28 '12 at 18:44
username=asdf&password=asdf&button=Submit --> the response is `fail` — user1460015, Sep 28 '12 at 18:48
Are you including either a [`urlencoded`](http://www.senchalabs.org/connect/urlencoded.html) or [`bodyParser`](http://www.senchalabs.org/connect/bodyParser.html) in the `app`'s configuration? — Jonathan Lonowski, Sep 28 '12 at 18:57
I have the bodyParser but not the urlencoded. [This post](http://stackoverflow.com/questions/11295554/how-to-disable-express-bodyparser-for-file-uploads-node-js) says bodyParser 'wraps three other methods - express.json, express.urlencoded and express.multipart.' Do you think I would need to explicitly state it? — user1460015, Sep 28 '12 at 19:04

score 9 · Accepted Answer · answered Sep 28 '12 at 19:17

9

You still have to stop the <form> from submitting via its default action, which can be done with event.preventDefault():

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

Otherwise, the <form> will redirect the page to its action (or back to the current address if no action was given), interrupting the $.post request.

answered Sep 28 '12 at 19:17

Jonathan Lonowski

121,453
34
200
199

That did it. Preventing the default action correctly sent the response from the AJAX request to the processData function. – user1460015 Sep 28 '12 at 19:24

AJAX call in expressJS

1 Answers1