如何从jQuery $.ajax() POST请求中获取并使用服务端返回值

第一步：修改Express后端接口，正确返回数据 #

完成数据库更新逻辑后，直接调用Express提供的响应方法返回数据即可，推荐返回JSON格式方便前端做逻辑处理，参考代码如下：

app.post('/api/index/like', async (req,res)=>{
  try {
    // 此处替换为你的数据库更新逻辑，示例为给对应博客点赞数+1并返回更新后的数据
    const updatedBlog = await BlogModel.findByIdAndUpdate(
      req.body.id,
      { $inc: { likes: 1 } },
      { new: true }
    )
    // 成功时返回200状态码和业务数据
    res.status(200).json({
      success: true,
      likes: updatedBlog.likes,
      msg: '点赞成功'
    })
  } catch (err) {
    // 出错时返回对应错误状态和提示
    res.status(500).json({
      success: false,
      msg: '点赞失败，请稍后重试'
    })
  }
});

如果需要返回HTML片段，替换res.json()为res.send(HTML内容)即可。

第二步：修改前端AJAX代码，正确接收返回数据 #

你现有的前端代码存在3处需要调整的地方：

• success回调没有声明data形参，无法获取后端返回的内容
• dataType设置为html和后端返回的JSON格式不匹配，需要修改为json
• 不推荐使用async: false配置，同步请求会阻塞页面主线程，影响用户交互，建议删除

修改后的前端代码参考：

function likedpost(el){
  var id = el.dataset.postid;
  var author = el.dataset.author;
  $.ajax({
    type: "POST",
    url: "api/index/like",
    data: {id: id, author:author},
    dataType:"json",
    success: function(data){
      // 此处data就是后端返回的完整数据，可以直接使用
      findingnumberoflikes(data)
      // 可直接更新页面点赞数展示
      document.getElementById("likescounter").innerText = data.likes
      console.log("action performed successfully")
    },
    error: function(err){
      console.log("请求出错：", err)
    }
  });
}
function findingnumberoflikes(data) {
  console.log("the data returned is ", data);
}

内容的提问来源于stack exchange，提问作者Tan Ya