如何从 Java Script 中的 ajax 调用解析 JSON 对象

Question

我正在接收 JSON 响应的 JSP 中进行 Ajax 调用。

运行alert('Ajax Response ' + respArr); 会出现以下屏幕：

Java 服务器端代码：

public void doGet(HttpServletRequest request, HttpServletResponse res) throws IOException, ServletException {
    try {
        String fromDate = request.getParameter("drFrom");
        String toDate = request.getParameter("drTo");
        JSONArray jsonArray = chartData.getCCSBJson(fromDate, toDate);
        res.setContentType("application/json");
        res.getWriter().write(jsonArray.toString());
    }

JavaScript：

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    if(xmlhttp.responseText != null) {
        var respArr = xmlhttp.responseText;
        var jsonData = eval("(" + respArr + ")");
        alert('JSON Chart ' + jsonData); // The line from above
        var obj = JSON.parse(xmlhttp.responseText);
        alert('JSON Parse' + obj);

返回的 JSON：

[
  {
    "chart":{
      "caption":"",
      "exportDataFormattedVal":"1",
      "numberPrefix":"",
      "showexportdatamenuitem":"1",
      "xAxisName":"Bureau usage",
      "yAxisName":"count"
    },
    "data":[
      {
        "label":"SB AutoDecison",
        "value":"0"
      },
      {
        "label":"CC AutoDecison",
        "value":"0"
      },
      {
        "label":"CC Judgemental",
        "value":"0"
      },
      {
        "label":"SB Judgemental",
        "value":"0"
      }
    ]
  }
]

警报结果：

alert('JSON Chart ' + jsonData) // JSON Chart[object Object]
alert('JSON Parse ' + obj);     // JSON parse[object Object]

我想要的是解析对象并从内容中生成一个 Excel 工作表。

当我尝试循环时：

var jqueryData = jQuery.parseJSON(respArr);
var obj = JSON.parse(xmlhttp.responseText);
for (var i in obj) {
    alert('For loop string' + obj[i]);
}

它会使用 JavaScript 代码引发大约 7 或 8 个警报

for (i = 0; i < 5; i++) {
    alert(i + ' of respArr ' + respArr[i]);
}

在每个循环的迭代中给出一个接一个的 JSON 字母：[、{、"、c、h，等等。

我不能像respArr[0].data 或respArr[0].chart 那样只遍历JSON 吗？

Answer 1

有几点：

首先，您的 Java servlet 并没有真正返回“字符串”。当您编写jsonArray.toString() 时，是的，您正在将数组转换为字符串，但这仅仅是为了通过网络编写它。 HTTP 是一种文本协议。所以，doGet 方法实际上返回的是一个 HTTP 响应（它恰好是文本，很可能是二进制）。

这样，当客户端（在这种情况下，您的 JavaScript 通过 XMLHttpRequest）向您的服务器（您的 servlet）发出 GET 请求时，它会返回 JSON 响应（是的，作为文本）。在这种情况下，您的 xmlhttp.responseText 变量应该包含您在问题中显示的 JSON。

调用以下之一：

• JSON.parse(xmlhttp.responseText)
• jQuery.parseJSON(xmlhttp.responseText)
• $.parseJSON(xmlhttp.responseText)

都应该返回相同的对象。使用此对象，您可以按照您想要的方式访问其属性。以下应该工作：

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    if (xmlhttp.responseText != null) {
        var json = xmlhttp.responseText;
        var arr = JSON.parse(json);
        var data = arr[0].data;       // This is what you want to do?
        var chart = arr[0].chart;     // This is what you want to do?
        // try running alert(chart.xAxisName);
        // and so on

旁注：当您运行alert(obj);（其中obj 是一个对象）时，您看到的是[object Object]，因为这就是JavaScript 将对象表示为字符串的方式。如果您想查看 JavaScript 对象的内部结构，正如其他人所指出的，您最好使用console.log(obj)。 （另外，升级或切换到更好的浏览器。您将可以使用更好的调试工具。）

Answer 2

您的 json 响应具有以下结构：

[
   {
      "chart":{
         "caption":"",
         "exportDataFormattedVal":"1",
         "numberPrefix":"",
         "showexportdatamenuitem":"1",
         "xAxisName":"Bureau usage",
         "yAxisName":"count"
      },
      "data":[
         {
            "label":"SB AutoDecison",
            "value":"0"
         },
         {
            "label":"CC AutoDecison",
            "value":"0"
         },
         {
            "label":"CC Judgemental",
            "value":"0"
         },
         {
            "label":"SB Judgemental",
            "value":"0"
         }
      ]
   }
]

访问最外层对象的第一个元素，例如response[0]。 然后是其中的图表对象，如response[0].chart 等等。 http://jsonformatter.curiousconcept.com/ 将帮助格式化 JSON 并使其可读。

Answer 3

看看这个FIDDLE

您可以直接访问对象的属性。

$(function () {

    var q = [{
        "chart": {
            "caption": "",
                "exportDataFormattedVal": "1",
                "numberPrefix": "",
                "showexportdatamenuitem": "1",
                "xAxisName": "Bureau usage",
                "yAxisName": "count"
        },
            "data": [{
            "label": "SB AutoDecison",
                "value": "0"
        }, {
            "label": "CC AutoDecison",
                "value": "0"
        }, {
            "label": "CC Judgemental",
                "value": "0"
        }, {
            "label": "SB Judgemental",
                "value": "0"
        }]
    }];

    console.log(q);
    console.log(q[0].data);
    q[0].data.forEach(function (item) {
        console.log(item.label);
        console.log(item.value);
    });

});