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

Posted 2023-05-08

【中文标题】如何在 AJAX POST 请求后解析来自服务器的 JSON 响应？

【英文标题】：HOW to Parse JSON response from the server after AJAX POST-request?

【发布时间】：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

【参考方案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
  
);

谢谢大家！

【讨论】：

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