springmvc和js前端的数据传递和接收方式

在springmvc中controller的结果集可通过json格式传到js前端接受，也可以通过Map传给前端，具体实现如下

1，通过json格式传递

controller层实现如下

1. @RequestMapping("queryCityInfo")
2. @ResponseBody
3. public String queryCityInfo()throws Exception{
4. String provinceId = getString("id");
5. @SuppressWarnings("rawtypes")
6. List cityList = personalService.queryCity(provinceId);
7. if(null != cityList && cityList.size() >0 ){
8. String json = JSONUtils.toJSONString(cityList);
9. super.outStr(json);
10. }
11. return null;
12. }
13. protected void outStr(String str)</span>
14. {
15. try
16. {
17. response.setCharacterEncoding("UTF-8");
18. response.getWriter().write(str);
19. }
20. catch (Exception e)
21. {
22. }
23. }
24. public static <T> String toJSONString(List<T> list)
25. {
26. JSONArray jsonArray = JSONArray.fromObject(list);
27. return jsonArray.toString();
28. }

js端接受如下

1. function selectBankCity(id){
2. $.ajax({
3. url:baseAddress+"queryCityInfo.do?provinceId="+id,
4. type:'get',
5. dataType:'json',
6. success:function(data){
7. $('#custBankArea').empty();
8. $('#custBankArea').append("<option >--请选择城市信息--</option>");
9. for(var i=0;i<data.length;i++){
10. $('#custBankArea').append("<option value='"+data[i].id+"'>"+data[i].cityName+"</option>");
11. }
12. }
13. });
14. }

2，通过Map传递

controller层实现如下

1. @RequestMapping("queryProvince")
2. @ResponseBody
3. public Map<String, Object>  queryProvince(HttpServletRequest request,HttpServletResponse response){
4. Map<String, Object> map = new HashMap<String, Object>();
5. try {
6. @SuppressWarnings("rawtypes")
7. List provinceList = personalService.queryProvince();
8. if(null != provinceList && provinceList.size() >0 ){
9. map.put("province", provinceList);
10. }
11. } catch (Exception e) {
12. // TODO Auto-generated catch block
13. e.printStackTrace();
14. }
15. return map;
16. }

js端接受如下

1. $.ajax({
2. url:baseAddress+"queryProvince.do",
3. type:"get",
4. success:function(resData){
5. var data = resData.province;
6. for(var i=0;i<data.length;i++){
7. //js实现
8. //var objs = document.getElementById("cusBankCity")
9. //objs.options.add(new Option(data[i].provinceName) ,data[i].id);
10. //jq实现
11. $("#cusBankCity").append("<option value='"+data[i].id+"'>"+data[i].provinceName+"</option>");
12. }
13. }
14. });