ajax로 모달창을 띄우자

이번엔 지난 글에 이어서 결과로 모달창을 띄워보겠습니다
지난 글: 같은 HTML 파일 내에서 href로 이동할때 동적으로 값 가져오기

지난번엔 자바스크립트로 true와 false 출력만을 해보았습니다
이번엔 ajax를 이용해서 모달창을 띄우겠습니다

⚠️ Controller 코드 수정!

@ResponseBody
@GetMapping("/checkId/{member_id}")
public Map<String, Boolean> checkUsername(@PathVariable String member_id) {
	Map<String, Boolean> result = new HashMap<>();
	boolean isExist = userService.userIdCheck(member_id);
	result.put("exist", isExist);
	return result;
}

Map 형식으로 boolean값을 key-> String값으로 넘겨주게 만들었습니다

위 코드에선 key:exist 로 넘겨주게 됩니다

⚠️ HTML 코드 수정!

button id값 설정‼️

<button id="checkButton" type="button" class="flex">중복 확인</button>

script ajax 추가‼️

$("#checkButton").click(function() {
	let memberId = $("#member_id").val();
		$.ajax({
          url: "/user/checkId/" + memberId,
          type: "GET",
          success: function(response) {
            if (!response.exist) {
              $("#modalMessage").text("사용 가능한 아이디입니다.");
            } else {
              $("#modalMessage").text("이미 사용 중인 아이디입니다.");
            }
            $("#myModal").show();
          }
        });
});

$(".close").click(function() {
  $("#myModal").hide();
});

받아온 exist 값에 따라서 #modalMessage가 달라짐!

modal html 추가‼️

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p id="modalMessage"></p>
  </div>
</div>

사용할 수 있는 id를 넣으면

사용할 수 없는 id를 넣으면

완성!