springmvcとjsフロントエンドのデータの送受信方法（2種類）

Spring MVCでControllerの結果セットは、JSON形式でJSフロントエンドに伝達されるか、Mapで伝達されることができます。具体的な実装は以下の通りです

1、json形式で伝達されます

controller層の実装は以下の通りです

 @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 端が以下のように受信します

function selectBankCity(id){ 
  $.ajax({ 
    url:baseAddress+"queryCityInfo.do#63;provinceId="+id, 
    type:'get', 
    dataType:'json', 
    success:function(data){ 
      $('#custBankArea').empty(); 
      $('#custBankArea').append("<option >"--都市情報を選択してください--</option>" 
      for(var i=0;i<data.length;i++{ 
        $('#custBankArea').append("<option value='"+data[i].id+">"+data[i].cityName+"</option>" 
      } 
    } 
  }); 
} 

2、マップを通じて渡されます

controller層の実装は以下の通りです

@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-生成された catch ブロック 
      e.printStackTrace(); 
    } 
    return map; 
  } 

js 端が以下のように受信します

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

これで本文のすべてが終わりました。皆様の学習に役立てば幸いです。また、呐喊教程を多くのサポートをお願いします。

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーにより自発的に貢献し、自己でアップロードされた内容であり、本サイトは所有権を持ちません。また、人工的な編集は行われていません。著作権侵害を疑う内容があれば、以下のメールアドレスまでご連絡ください：notice#oldtoolbag.com（メールを送信する際には、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認がついたら、本サイトは即座に侵害を疑われる内容を削除します。）