Question

我正在尝试通过AJAX请求从我的数据库中获取信息，但不会触发成功事件。

然而，服务器收到AJAX请求，因为它在终端中触发了正确的控制台日志。

我正在使用Express框架在Node中构建它。

以下是触发AJAX调用的代码。 'componentDidMount triggered'被记录到控制台。但随后就停止了。即使我知道服务器已经接收enter code here一个AJAX请求，也不会触发'success'或'error'中的console.log。

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

我也没有收到任何其他错误，所以我不知道为什么这不起作用。

有人可以帮忙吗？

更新：感谢您的帮助。我现在离我更近了一步。我没有意识到在提供AJAX请求时我需要'res.end'。当我改变这个时，我设法得到了回复，虽然这是一个错误。

她是服务器端代码：

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

Answer 1

与你的问题相切，但同样重要的是找出为什么没有调用.success：你的代码没有在成功处理程序中调用Main的setState，因为你的成功函数没有调用组件“但”由jQuery，某处“。

如果要在成功处理过程中调用组件上的setState，请先缓存组件，然后调用组件函数：

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

或使用JavaScript bind函数（与jQuery.bind无关）将成功函数的执行上下文显式设置为您的组件：

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

Answer 2

我的错误在于res.write（member.toString（））。我不得不将其更改为res.write（JSON.stringify（member）），因为客户端要求提供JSON文件。

React JS js中的AJAX请求不起作用

2 个答案: