CODEWITHSUNDEEP
javascriptajaxnode.jsreactjs
mrborgen
mrborgen

Reputation: 401

AJAX request in React JS js doesn't work

I'm trying to get info from my database via an AJAX request, but the success event isn't triggered.

The AJAX request is however received by the server, as it trigger the correct console log in the terminal.

I'm building it in Node, using the Express framework.

Here is the code for triggering the AJAX call. The 'componentDidMount triggered' is logged to the console. But then it stops. Neither the console.log in 'success' or 'error' is triggered, even though I know that the server has receenter code hereived an AJAX request.

app.get('/api/:name', function (req,res){
    name = req.params.name;
    Member.findOne({username: name}, function(err,member){
        res.setHeader('Content-Type', 'application/json');
        res.write(member.toString());
        console.log('member fetched from DB: ', member);
        res.end();
    });
});

I'm not getting any other errors either, so I have no idea why this isn't working.

Can anybody please help?

UPDATE: Thanks for the help. I'm one step closer now. I did not realise I needed 'res.end' when serving the AJAX request. When I changed this, I've managed to get a response, though it's an error.

Her is the server side code:

app.get('/api/:name', function (req,res){
    name = req.params.name;
    Member.findOne({username: name}, function(err,member){
        res.setHeader('Content-Type', 'application/json');
        res.write(member.toString());
        console.log('member fetched from DB: ', member);
        res.end();
    });
});

Upvotes: 2

Views: 2986

Answers (2)

mrborgen
mrborgen

Reputation: 401

My mistake was in the res.write(member.toString()). I had to change it to res.write(JSON.stringify(member)), as the client was asking for a JSON file.

Upvotes: 0

Mike 'Pomax' Kamermans
Mike 'Pomax' Kamermans

Reputation: 53598

Tangential to your question, but equally important as figuring out why .success isn't being called: your code is not calling Main's setState in the success handler, because the success function isn't called "in your component" but "by jQuery, somewhere".

If you want to call setState on your component as part of the success handling, either cache the component and then call component functions on that:

var self = this;
$.ajax({
  ...
  success: function() {
    self.setState({ ... });
  }
...

or use the JavaScript bind function (unrelated to jQuery.bind) to explicitly set the execution context for the success function to be your component:

...
success: function(data) {
  console.log('success')
  this.setState({data: data});
}.bind(this),
...

Upvotes: 5

Related Questions