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.   
  14.   
  15. protected void outStr(String str)</span>  
  16.     {  
  17.         try  
  18.         {  
  19.             response.setCharacterEncoding("UTF-8");  
  20.             response.getWriter().write(str);  
  21.         }  
  22.         catch (Exception e)  
  23.         {  
  24.         }  
  25.     }  
  26. public static <T> String toJSONString(List<T> list)  
  27.     {  
  28.         JSONArray jsonArray = JSONArray.fromObject(list);  
  29.           
  30.         return jsonArray.toString();  
  31.     }  

  js端接受如下

  

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

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端接受如下

[javascript] view plain copy
    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.         }); 
原文地址:https://www.cnblogs.com/zhaoxinshanwei/p/5768353.html