AJAX request in React JS js doesn't work

Question

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

If console.log isn't being called, I'd double check the console for errors and check the network tab to see what response is being sent. Also, the this in your success callback isn't correct. Simplest fix would be to capture the this: var self = this; before the $.ajax call and then use self in the closure: self.setState(. — WiredPrairie
– WiredPrairie, Commented Mar 7, 2015 at 19:37
if you're seeing the server receiving the request, can you also say what you're using server side, and how you're generating the response? What does the network tab in your dev tools say when that request happens? Does it say you're suing GET when you wanted POST (or vice verse), does the request work but you never get an answer back (because maybe your server's forgetting to send a response end?) etc. etc — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Mar 7, 2015 at 20:03

Mike 'Pomax' Kamermans · Accepted Answer · 2015-03-07 20:01:29Z

5

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

edited Mar 7, 2015 at 20:01

answered Mar 7, 2015 at 19:43

Mike 'Pomax' Kamermans

54.3k17 gold badges134 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mike 'Pomax' Kamermans Over a year ago

to the kind person who downvoted: do remember that valid responses on Stackoverflow are "generally useful or helpful" responses even if they don't solve the original problem. Ultimately only a real answer will get accepted, but this answer is way too long for a comment, and certainly addresses a thing that's wrong with the original question, even if the poster did not notice the problem

mrborgen · Accepted Answer · 2015-03-07 21:35:13Z

0

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.

answered Mar 7, 2015 at 21:35

mrborgen

4015 silver badges10 bronze badges

1 Comment

Mike 'Pomax' Kamermans Over a year ago

in that case you don't want res.write(...) at all, you want res.json(member) (provided you're using express?), which takes an object and sends it out as json-serialized text.

Collectives™ on Stack Overflow

AJAX request in React JS js doesn't work

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related