如何在 AJAX POST 请求后解析来自服务器的 JSON 响应？答案

【问题标题】：HOW to Parse JSON response from the server after AJAX POST-request?如何在 AJAX POST 请求后解析来自服务器的 JSON 响应？
【发布时间】：2017-11-12 09:14:50
【问题描述】：

正如您从标题中看到的问题。这是我的工作：

发送类似的请求

$.ajax({
  type: "POST",
  url: "http://www.example.com/api/",
  data: {
    'data': '1',
    'beacon': 'fried'
  },
  complete: function(res) {
    //need help here...
  }
});

API 会回显。如果我这样做document.forms["myform"].submit(); 页面显示像

这样的 JSON 响应

{
  "data": [{
    "Chief": "Max",
    "temperature": "65",
    "done": "yes",
    "cost": 24
  }]
}

那么我应该如何解析（检查、显示值）？尝试了很多方法。

任何帮助将不胜感激！

附：使用 jquery-3.2.1.min.js

【问题讨论】：

标签： php jquery json ajax parsing

【解决方案1】：

您可以在请求属性中将 dataType 设置为 JSON：

 $.ajax({
    type: "POST",
    url: "http://www.example.com/api/",
    data: {'data': '1', 'beacon': 'fried'},
    dataType: 'JSON',
    complete: function (res) {
        console.log(res); // will be decoded
        // acces your values like this :
        var data = res.responceText.data[0];
        alert(data.Chief);
    }
 });

编辑

添加了如何访问特定数据。

【讨论】：

比所有其他答案简单得多，并且还在内部处理无效 json 的错误
但这只有在我们确定响应是 JSON 时才有效。
@AjayDeepakKumar 更有理由使用它...如果出现解析错误，将进入错误回调（并拒绝承诺）
@JazZ 我们必须说这是非常简单的错误处理答案
@JazZ 是的，这确实是最适应和最方便的方式。所以我可以在控制台的“responseText”中看到响应。但是我怎样才能得到那个特定的值呢？谢谢大家的帮助！

【解决方案2】：

你应该使用

JSON.parse()

由于您在 json data 中有数组，您可以通过 res.data[0].cost 或 res.data[0]["cost"] 访问它

【讨论】：

谢谢，我需要 JSON.parse(res.responseText);那s what I didnt知道
太棒了，很高兴它有帮助，如果对你有帮助，请标记为正确答案

【解决方案3】：

如果需要，请使用JSON.parse()，否则您可以从res.data获取数组

【讨论】：

@Khuma data 是一个对象数组。试试alert(res.data[0]["cost"])

【解决方案4】：

你可以使用JSON.parse()

 $.ajax({
        type: "POST",
        url: "http://www.example.com/api/",
        data: {'data': '1', 'beacon': 'fried'},
        complete: function (res) {
          var response = JSON.parse(res); 
        }
     });

【讨论】：

【解决方案5】：

试试JSON.parse()

$.ajax({
    type: "POST",
    url: "http://www.example.com/api/",
    data: {'data': '1', 'beacon': 'fried'},
    complete: function (res) {
       var arr = JSON.parse(res).data;

       arr.forEach(function(obj) {
           var cost = obj.cost || null,
                Chief = obj.Chief || null,
                temperature = obj.temperature || null,
                done = obj.done || null;

           console.log('Cost: ' + cost + ', Chief: ' + Chief + ', Temperature:' + temperature + ', Done: ' + done);
       });
    }
});

【讨论】：

为什么？使用 dataType 执行此操作，以便在内部对其进行解析，如果 json 无效，将进入错误回调
同意@charlietfl，但无论如何我也尝试过这种方式@MH2K9我有一个错误

【解决方案6】：

第一个问题是它不允许来自不同域的响应，所以我将所有代码转移到 api 所在的同一服务器。

现在这段代码可以工作了：

$.ajax({
  type: "POST",
  url: "../api/",
  data: {'data': '1', 'beacon': 'fried'},
  dataType: 'JSON',
  complete: function (res) {
  console.log(res);
  var r = JSON.parse(res.responseText);
  console.log(r.data[0].Chief); //retrieved Alex, that is response from the server
  }
});

谢谢大家！

【讨论】：

很好，但您不需要再次解析它。尚未解码。