完成函数从未在$ .ajax之后调用

时间:2017-04-10 16:01:10

标签: javascript jquery node.js ajax

我对这一切都有点新鲜(包括Javascript回调和ES6)。我正在使用NodeJS + Express + MongoDB。

我正在调用Ajax函数来更新项目,并且永远不会成功完成Ajax调用。

这是我的Ajax调用(从React调用)

editBug : function(bug){

    console.log('about to edit bug with these values',bug);
    $.ajax({
        url:'/api/bugs',
        method: 'PUT',
        data:bug
    })
    .done((jqxhr) => {
        console.log('succcess while editing the bug');
        this.setState({successVisible : true});
    })
    .fail((jqxhr) => {
        console.log('error : ' + jqxhr);
    })  
},

这是我的API函数:

app.put('/api/bugs',function(req,res){

    //console.log('req',req);
    console.log('query string : ',req.query);
    console.log('query params : ',req.params);
    console.log('query body: ',req.body);
    let id = new ObjectID(req.body._id);
    req.body._id = new ObjectID(req.body._id);

    db.collection('bugs').replaceOne(
        {_id:id},
        req.body,
        function(err,result){
            assert.equal(err,null);
            console.log('Successfull replace!');
            res.status(200);
        }
    );
});

Successfull replace!日志在服务器端正确显示。 about to edit bug with these values正确显示在正面。但succcess while editing the bug日志未显示在前端,似乎永远不会执行.done调用。

2 个答案:

答案 0 :(得分:3)

您是否需要在Node.js端结束您的响应对象? 尝试向您的回复对象添加res.end();或任何类型的回复。

此外,您可以使用chrome(或任何其他浏览器)网络标签来实际查看您的AJAX请求是如何结束的,以查看它们是挂起还是完成。

答案 1 :(得分:3)

问题是您没有在节点端向浏览器发送任何响应。试试以下片段,你应该好好去

另外,我想指出你应该处理错误。在更新bugs时如果出现问题,最佳做法是通过500状态代码通知浏览器,指示预期的操作失败。我在下面的剪辑中添加了这个方面

app.put('/api/bugs', function(req, res) {

  //console.log('req',req);
  console.log('query string : ', req.query);
  console.log('query params : ', req.params);
  console.log('query body: ', req.body);
  let id = new ObjectID(req.body._id);
  req.body._id = new ObjectID(req.body._id);

  db.collection('bugs').replaceOne({
      _id: id
    },
    req.body,
    function(err, result) {
      if (err) {
        console.log('Failed replace');
        res.status(500).end(); // <- We set the response status code and end the request
      } else {
        assert.equal(err, null);
        console.log('Successfull replace!');
        res.status(200).end(); // <- We set the response status code and end the request
      }
    }
  );
});