CODEWITHSUNDEEP
javascriptjsonajaxreactjsexpress
Geoff McLennan
Geoff McLennan

Reputation: 448

Ajax call to Express app does not pass data

I am building an app using React and Express. From a React component I am calling an ajax function that targets a certain Express route. However, my route handler does not receive the data passed with the Ajax request.

My Express app (I put the specific route in the main app.js for testing purposes):

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var app = express();

var lists = require('./routes/lists');

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

app.use('/', express.static(path.join(__dirname, 'public')));
app.use('/lists', lists);

app.get('/lists/show', bodyParser.json(), function(req, res, next) {
    console.log(req.body);
});

My Ajax function (reqData is {id: this.props.id} when called):

export default function(reqData, path, method, onSuccess, onError, onComplete) {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                if(onSuccess) onSuccess(xhr.responseText != '' ? JSON.parse(xhr.responseText) : '');
            } else {
                if(onError && xhr.responseText != '') {
                    let data = JSON.parse(xhr.responseText);
                    if(data.ExceptionMessage) onError(data.ExceptionMessage);
                }
            }
        }
    };
    let url = window.location.href.replace('#', '') + path;
    xhr.open(method, url);
    xhr.setRequestHeader('Content-Type', 'application/json');
    console.log(JSON.stringify(reqData));
    xhr.send(JSON.stringify(reqData));
    return xhr;
}

I know that bodyParser is working, because the console.log in the route handler prints {} to the server-side console, indicating that the req.body is empty.

I have tried passing reqData into xhr.send with and without JSON.stringify, neither have worked. But the json prints to the browser console perfectly.

I am completely at a loss as to where my request is going. Do I fundamentally misunderstand how xhr.send and Express routes interact?

Upvotes: 1

Views: 127

Answers (2)

Lyth
Lyth

Reputation: 2201

Ok, now I think I know where the issue is - it is the method you use with XHR:

xhr.open(method, url);

If you use GET, then you won't have a request body. If you use POST, then the handler is somewhere in ./routes/lists.

Assuming you only do console.log in the provided snippet, you actually use GET. According to Mozilla docs for XHR:

The XMLHttpRequest.send() method sends the request. [...] send() accepts an optional argument for the request body. If the request method is GET or HEAD, the argument is ignored and request body is set to null.

Upvotes: 1

Nadim
Nadim

Reputation: 75

Why don't you try to use some kind of ajax library like: https://github.com/yuanyan/react-ajax

Upvotes: 0

Related Questions