JavaScript spring

【Spring】Ajax通信でデータを受け取ったり設定したり


らじばんだり。
セレクトボックスから都道府県を選択→Ajax通信で市区町村を取得＆表示する。
よくある実装だし情報あるかと思ったら妙に断片的だし、controllerに値の送り方が分からず受け取り方がわからず設定仕方がわからず三時間テンヤワンヤしたのでこれまた備忘録にする。

■jspファイル
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<span>都道府県</span>
<select id="selectPrefecture" name="selectPrefecture">
 <option value="01">北海道</option>
 <option value="02">青森県</option>
 <option value="03">岩手県</option>
 <option value="04">宮城県</option>
 <option value="05">秋田県</option>
 <option value="06">山形県</option>
 <option value="07">福島県</option>
 <option value="08">茨城県</option>
</select>
 
<span>市区町村</span>
<select class="city_code_list"></select>


■contorller
?
1
2
3
4
5
6
7
8
9
10
11
12
13
@RequestMapping(method = RequestMethod.GET, produces="application/json; charset=UTF-8")
@ResponseBody
public String getAreaCodeData(@RequestParam String selectPrefecture) throws Exception {
 // 都道府県から市区町村を取得
 List<AreaCodeListEntity> areaCodeList = new ArrayList<AreaCodeListEntity>();
 areaCodeList = commonGetDataItem.getMtAreaCodeListForRadio(radio, ManageConst.DISP_LOCAL);
 
 // objectをjsonに変更
 ObjectMapper mapper = new ObjectMapper();
 String json = mapper.writeValueAsString(areaCodeList);
 
 return json;
}


■js
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$("#selectPrefecture").change(function(){
 $.ajax({
  type : "GET",
  url : "./area",  // 現在のページURL
  contentType : "application/json",
  data: ({selectPrefecture : $("#selectPrefecture option:selected").val()}),
  dataType : "json",
  cache : false,
  success : function(data) {
   // Controllerから取得した値がdataに入る
   // 現在のoptionをすべて削除
   $('.city_code_list option').remove();
 
   // 個別アクセスなら data[0].dispName
   // ループでoption生成するならこんな感じで
   $.each(data, function(i, value) {
    $('.city_code_list').append($('<option>').text(value.dispName).attr('value', value.areaCode));
   });
  },
  error : function(status) {
   // なにかしら失敗したらこっちに入る
  }
 });
});