概要

セレクトボックスの値が非同期で変更するものを作ってみました。

例

セレクトボックスで群馬県を選択
次のセレクトボックスには群馬県内の市だけが選択肢に入る

環境

Java13/JPA/JavaScript

参考

Ajaxを使った非同期通信
 @ResponseBodyについて
 ResponseEntityクラスについて

ソースコード

hello.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Ajax!</title>
</head>
<body>
	<form action="">
		<div class="form-group">
			<label th:for="ken">県</label>
			<select id="ken" class="form-control">
			<option>選択してください</option>
			<option id="kenOption" th:each="ken : ${kenList}"  th:text="${ken.kenName}" th:value="${ken.kenCode}"></option>
			</select>
		</div>
		<div class="form-group">
			<label th:for="city">市</label>
			<select id="city" class="form-control">
			<option>選択してください</option>
			</select>
		</div>
	</form>
	<script src="ajax.js"></script>
</body>
</html>

ajax.js

'use strict';

	//要素の取得
	const ken = document.getElementById('ken');
	const city = document.getElementById('city');

	// slectboxのchangeイベントで発火する関数
	function ajax() {

		//選択された県コードの取得
		let kenCode = ken.value;

		let request = new XMLHttpRequest();

		// onreadystatechangeは非同期。状態が変化するとコールバック関数が呼び出される。
		request.onreadystatechange = function() {

			//readyState4はレスポンスの受信完了
			if(request.readyState === 4) {

				// status200はサーバーとの通信OK
				if(request.status === 200) {

					// レスポンスの取得
					let resultJson = request.response;
					console.log(resultJson);

					let cityData;

					// optionタグをresultJson配列の数だけ作る
					for(let i = 0; i < resultJson.length; i++) {
						cityData += `<option th:value="${resultJson[i].cityCode}">${resultJson[i].cityName}</option>`
					}
					city.innerHTML = cityData;
				}else {
					city.innerHTML = '<option>通信失敗(´;ω;｀)</option>';
				}
			}
		}
		request.open('GET', '/hello/ajax?kenCode=' + kenCode, true);
		request.responseType = 'json';
		request.send(null);
	}
	ken.addEventListener('change', ajax);

request.send(null)でリクエスト送信前に、let resultJson = request.responseでレスポンス受け取ってるのは変な気がするけどこれでOK。
基本は同期処理完了→非同期処理完了の順番なので、リクエスト送信後にレスポンスを受け取る流れになる。

AjaxController.java

@Controller
public class AjaxController {
	@Autowired
	AjaxService ajaxService;

	// 画面表示
	@GetMapping("/hello")
	public String getHello(Model model) {
		List<AjaxEntity> kenList = ajaxService.getKenNameList();
		model.addAttribute("kenList", kenList);
	    return "hello";
	}

	// 非同期通信。県コードを受け取ってcityリストを返す。
	@GetMapping("/hello/ajax")
	@ResponseBody
	public ResponseEntity<List<AjaxEntity>> postAjax(@RequestParam("kenCode") int kenCode) {

		List<AjaxEntity> list = ajaxService.getCityNameList(kenCode);
		try {
			//通信成功
			return new ResponseEntity<List<AjaxEntity>>(list, HttpStatus.OK);
		} catch(Exception e) {
			//通信失敗
			return new ResponseEntity<List<AjaxEntity>>(HttpStatus.BAD_REQUEST);
		}
	}
}

@ResponseBodyをつけると@Controllerの戻り値にString以外も指定できる。
今回はEntityクラスのList（配列）をResponseEntity入れて戻り値にしている。
@RestControllerでも似たようなことができるっぽい。

AjaxService.java

@Service
public class AjaxService {
	@Autowired
	AjaxRepository ajaxRepository;

	/**
	 * 全県名と全県コードのリストを取得する
	 */
	public List<AjaxEntity> getKenNameList(){

		List<String[]> list = ajaxRepository.getKenNameList();
		List<AjaxEntity> aeList = new ArrayList<>();

		for(String[] array : list) {
			int kenCode = Integer.parseInt(array[0]);
			String kenName = String.valueOf(array[1]);

			AjaxEntity ae = new AjaxEntity();
			ae.setKenCode(kenCode);
			ae.setKenName(kenName);
			aeList.add(ae);
		}
		return aeList;
	}


	/**
	 * 同一県内の市をリストで返す
	 *
	 * 例：群馬県を選択すると、群馬県内の市リストが返る
	 */
	public List<AjaxEntity> getCityNameList(int kenCode){

		List<String[]> list = ajaxRepository.getCityNameList(kenCode);
		List<AjaxEntity> aeList = new ArrayList<>();

		for(String[] array : list) {
			int cityCode = Integer.parseInt(array[0]);
			String cityName = String.valueOf(array[1]);

			AjaxEntity ae = new AjaxEntity();
			ae.setCityCode(cityCode);
			ae.setCityName(cityName);
			aeList.add(ae);
		}
		return aeList;
	}
}

AjaxRepository.java

@Repository
public interface AjaxRepository extends JpaRepository<AjaxEntity, Integer>{

	@Query(value = "select distinct kenCode, kenName from AjaxEntity a")
	List<String[]> getKenNameList();

	@Query(value = "select distinct cityCode, cityName from AjaxEntity a where kenCode = :kenCode")
	List<String[]> getCityNameList(@Param("kenCode") int kenCode);
}

AjaxEntity.java

@Data
@Entity
@Table(name="address")
public class AjaxEntity {

	@Id
	@Column(name="kencode")
	private Integer kenCode;

	@Column(name="citycode")
	private Integer cityCode;

	@Column(name="kenname")
	private String kenName;

	@Column(name="cityname")
	private String cityName;
}