解析 JSON 并使用 jQuery mobile 中的数据扩展列表视图答案

【问题标题】：Parse JSON and extend a listview with the data in jQuery mobile解析 JSON 并使用 jQuery mobile 中的数据扩展列表视图
【发布时间】：2015-07-30 14:13:34
【问题描述】：

我想从我的服务器获取一些数据并附加一个 jQuery-Listview，这不起作用。测试时，我在 Chrome 控制台中收到此错误：

Uncaught SyntaxError: Unexpected token i

我用来消费来自服务器的 Json 字符串的代码：

$.ajax({
        url: 'http://domain/GetArknr'
    })
    .done(function(data) {
        $.each(JSON.parse(data), function(idx, obj) {
            $('#listview').append('<li id="' + obj.ARKNR + '"><a href="#">' + obj.ARKNR + '</a></li>');
        })
        $('#listview').listview('refresh');
        alert(data)
    })
    .fail(function() {
        alert("Failed to fetch data");
    })

还有 JSON：

[ { "arknr" : "0582",
    "id" : "0582"
  },
  { "arknr" : "0590",
    "id" : "0590"
  },
  { "arknr" : "0599",
    "id" : "0599"
  },
  { "arknr" : "1001",
    "id" : "1001"
  },
  { "arknr" : "1002",
    "id" : "1002"
  },
  { "arknr" : "1003",
    "id" : "1003"
  },
  { "arknr" : "1004",
    "id" : "1004"
  },
  { "arknr" : "1005",
    "id" : "1005"
  },
  { "arknr" : "1006",
    "id" : "1006"
  },
  { "arknr" : "1007",
    "id" : "1007"
  },
  { "arknr" : "1008",
    "id" : "1008"
  },
  { "arknr" : "1009",
    "id" : "1009"
  },
  { "arknr" : "1010",
    "id" : "1010"
  },
  { "arknr" : "1011",
    "id" : "1011"
  },
  { "arknr" : "1012",
    "id" : "1012"
  },
  { "arknr" : "1013",
    "id" : "1013"
  },
  { "arknr" : "1014",
    "id" : "1014"
  },
  { "arknr" : "1016",
    "id" : "1016"
  },
  { "arknr" : "1017",
    "id" : "1017"
  },
  { "arknr" : "1018",
    "id" : "1018"
  },
  { "arknr" : "1019",
    "id" : "1019"
  },
  { "arknr" : "1020",
    "id" : "1020"
  },
  { "arknr" : "1021",
    "id" : "1021"
  },
  { "arknr" : "1022",
    "id" : "1022"
  },
  { "arknr" : "1023",
    "id" : "1023"
  },
  { "arknr" : "1024",
    "id" : "1024"
  },
  { "arknr" : "1025",
    "id" : "1025"
  },
  { "arknr" : "1026",
    "id" : "1026"
  },
  { "arknr" : "1027",
    "id" : "1027"
  },
  { "arknr" : "1029",
    "id" : "1029"
  },
  { "arknr" : "1030",
    "id" : "1030"
  },
  { "arknr" : "1031",
    "id" : "1031"
  },
  { "arknr" : "1032",
    "id" : "1032"
  },
  { "arknr" : "1033",
    "id" : "1033"
  },
  { "arknr" : "1035",
    "id" : "1035"
  },
  { "arknr" : "1036",
    "id" : "1036"
  },
  { "arknr" : "1037",
    "id" : "1037"
  },
  { "arknr" : "1038",
    "id" : "1038"
  },
  { "arknr" : "1040",
    "id" : "1040"
  },
  { "arknr" : "1041",
    "id" : "1041"
  },
  { "arknr" : "1042",
    "id" : "1042"
  },
  { "arknr" : "1043",
    "id" : "1043"
  },
  { "arknr" : "1044",
    "id" : "1044"
  },
  { "arknr" : "1046",
    "id" : "1046"
  },
  { "arknr" : "1047",
    "id" : "1047"
  },
  { "arknr" : "1048",
    "id" : "1048"
  },
  { "arknr" : "1049",
    "id" : "1049"
  },
  { "arknr" : "1050",
    "id" : "1050"
  }
]

在服务器端，我使用的是 Spring 4.1.2。响应在 Chrome 中列为“xhr” - 我不知道如何将响应声明为application/json，我尝试了几种不同的注释来处理请求/GetArknr：

@RequestMapping(value = "/GetArknr")
public ModelAndView getArknr() {
    HashMap <String, Object> model = new HashMap();
    List <Map<String, Object>> data = dataProvider.getArkNr();

    model.put("table", data);
    return new ModelAndView("json/arknrListJson", model);
}

【问题讨论】：

标签： javascript jquery json spring listview

【解决方案1】：

通常在 Spring REST 服务中，您不需要视图，而是希望使用 @ResponseBody 并指定生成的类型为“application/json”

@RequestMapping(value = "/GetArknr", produces = "application/json")
@ResponseBody
public List<Map<String, Object>> getArknr() {
    HashMap <String, Object> model = new HashMap();
    List <Map<String, Object>> data = dataProvider.getArkNr();

    return data;
}

然后在您的 ajax 调用中，您可以执行以下操作：

$.ajax({
  cache : false,
  type : 'GET',
  url: 'http://domain/GetArknr',
  dataType : 'json',
  success : function(data) {
     if (data == null) {
         //error handling
     }
     $.each(data['something'], function(idx, obj) {
        $('#listview').append('<li id="' + obj.ARKNR + '"><a href="#">' + obj.ARKNR + '</a></li>');
    })
  }
}

您也可以在 $.ajax 调用中使用它来请求正确的数据格式（将 Accept 标头设置为“application/json”）Add Accept header to JQuery AJAX GET (via JSONP) request

【讨论】：

好吧，到目前为止，这看起来不错。现在的问题是它没有进入jQuery的每个循环
好吧，这行得通——生成 json 的 jsp 也不对。谢谢！

【解决方案2】：

.ajax 数据变量类型由 jquery 以智能方式选择，很可能您不需要将数据解析为 json，因为它已经是一个 JavaScript 对象。你能告诉我们function(data){之后的console.log(data)向你展示了什么吗？

【讨论】：