Data Transmission and Reception Methods Between Spring MVC and JS Front-end (Two Methods)

In springmvc, the result set of the controller can be transmitted to the js front-end in JSON format, or it can be transmitted to the front-end through Map, the specific implementation is as follows

1Delivered in JSON format

The implementation in the controller layer is as follows

 @RequestMapping("queryCityInfo") 
  @ResponseBody 
  public String queryCityInfo() throws Exception { 
     String provinceId = getString("id"); 
     @SuppressWarnings("rawtypes") 
    List cityList = personalService.queryCity(provinceId); 
     if(null != cityList && cityList.size() > 0) { 
      String json = JSONUtils.toJSONString(cityList);      
      super.outStr(json);}} 
     } 
    return null; 
  } 
protected void outStr(String str)</span> 
  { 
    try 
    { 
      response.setCharacterEncoding("UTF-8");-8"); 
      response.getWriter().write(str); 
    } 
    catch (Exception e) 
    { 
    } 
  } 
public static <T> String toJSONString(List<T> list) 
  { 
    JSONArray jsonArray = JSONArray.fromObject(list); 
    return jsonArray.toString(); 
  } 

js side accepts as follows

function selectBankCity(id){ 
  $.ajax({ 
    url:baseAddress+"queryCityInfo.do#63;provinceId="+id, 
    type: 'get', 
    dataType: 'json', 
    success: function(data){ 
      $('#custBankArea').empty(); 
      $('#custBankArea').append("<option >"--Please select city information--</option> 
      for(var i=0;i<data.length;i++{ 
        $('#custBankArea').append("<option value='"+data[i].id+">"+data[i].cityName+"</option> 
      } 
    } 
  }); 
} 

2Pass through Map

The implementation in the controller layer is as follows

@RequestMapping("queryProvince") 
  @ResponseBody 
  public Map<String, Object> queryProvince(HttpServletRequest request,HttpServletResponse response){ 
    Map<String, Object> map = new HashMap<String, Object>(); 
    try { 
      @SuppressWarnings("rawtypes") 
      List provinceList = personalService.queryProvince(); 
      if(null != provinceList && provinceList.size() > 0) { 
        map.put("province", provinceList); 
      }  
    } catch (Exception e) {}} 
      // TODO Auto-generated catch block 
      e.printStackTrace(); 
    } 
    return map; 
  } 

js side accepts as follows

$.ajax({ 
      url:baseAddress+"queryProvince.do", 
      type:"get", 
      success:function(resData){ 
        var data = resData.province; 
        for(var i=0;i<data.length;i++{ 
          //js implementation 
          //var objs = document.getElementById("cusBankCity") 
          //objs.options.add(new Option(data[i].provinceName, data[i].id)); 
          //jq implementation 
          $("#cusBankCity").append("<option value='"+data[i].id+">"+data[i].provinceName+"</option> 
        } 
      } 
    }); 

That's all for this article. I hope it will be helpful to everyone's study, and I also hope everyone will support the Yelling Tutorial more.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (When sending an email, please replace # with @ to report, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)