javascript如何在Java脚本中从ajax调用解析JSON对象

Question

我正在JSP中进行一个Ajax调用，它接收到一个JSON响应

运行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]);
}

它会抛出7到8个带有JavaScript代码的警报

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

给出JSON的一个又一个字母：[、{、"、c、h，等等，用于循环的每次迭代

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

Answer 1

您的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 2

查看此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);
    });

});

Answer 3

有几件事：

首先，Java servlet并没有真正返回“字符串”。当你写jsonArray.toString()时，是的，你正在把数组变成一个字符串，但这仅仅是为了在网络上写它。HTTP是一种文本协议。因此，从某种意义上说，doGet方法实际上返回的是一个HTTP响应（它恰好是文本，很可能是二进制的）

这样，当客户机（在本例中，是通过XMLHttpRequest的JavaScript）向服务器（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)。（此外，请升级或切换到更好的浏览器。您将可以使用更好的调试工具。）