Jquery Ajax data not showing

Question

Jquery Ajax data not showing

In the following ajax request, I am sending a request to my node server to do some work on the file with name fileName.

Ajax

$.ajax({
    type: "POST",
    data: {'imageFileName': fileName},
    contentType: "json",
    url: '/myRoute',
    success: function(data){
        if(!data){
            errorMessage();
        }
        else{
            display(data);
        }
    }
})

Router

router.post('/myRoute', function(req, res){
    console.log(req.imageFileName) //Undefined
    res.end();
})

However, when I log the request on the server-side, I get a giant object without the fileName. Given that the request is named req, req.imageFileName yields undefined. What am I doing wrong such that I can't access fileName on the server side?

jquery
ajax
node.js

Answer 1

Try removing quote in data. Also cross check oncec what is in the filename.

$.ajax({
    type: "POST",
    data: {imageFileName: fileName},
    contentType: "json",
    url: '/myRoute',
    success: function(data){
        if(!data){
            errorMessage();
        }
        else{
            display(data);
        }
    }
})

http://api.jquery.com/jquery.ajax/

Answer 2

Try the following:

$.ajax({
type: "POST",
data: {'imageFileName': fileName},
url: '/myRoute',
success: function(data){
    if(!data){
        errorMessage();
    }
    else{
        display(data);
    }
}
})

server side

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

I want to see if its the content type thats giving you trouble.

Answer 3

The tag is in the body of the request, as provided by body-parser. Therefore, this worked.

router.post('/myRoute', function(req, res){
    console.log(req.body.imageFileName) //Correct
    res.end();
})