Hello

12_ajax 이메일 중복체크_입력한 이메일 서버로 보내기

by 볼빵빵오춘기

save.html

ajax를 사용하기 위해서는 jQuery가 필요하므로 head에 jQuery CDN을 넣어준다.

<head>
    <meta charset="UTF-8">
    <title>save</title>
    <!-- jquery cdn -->
    <script
            src="https://code.jquery.com/jquery-3.6.3.min.js"
            integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
            crossorigin="anonymous"></script>
</head>

 

  • name이 ”memberEmail”인 input 에 id="memberEmail"를 넣어준 후 onblur="emailCheck()"도 넣어준다.
<이메일: <input type="text" name="memberEmail" id="memberEmail" onblur="emailCheck()"> <br>
  • ajax 코드를 넣어준다.
<script th:inline="javascript">
    const emailCheck = () => {
        const email = document.getElementById("memberEmail").value;
        const checkResult = document.getElementById("check-result");
        console.log("입력값: ", email);
				
        $.ajax({
            // 요청방식: post, url: "email-check", 데이터: 이메일
            type: "post",
            url: "/member/email-check",
            data: {
                "memberEmail": email
            },
            success: function(res) {
                console.log("요청성공", res);
            },
            error: function(err) {
                console.log("에러발생", err);
            }
        });

    }
</script>

 

MemberController

ajax를 쓸 때는 return 타입에 @ResponseBody 에 써줘야 한다.

    @PostMapping("/member/email-check")
    public @ResponseBody String emailCheck(@RequestParam("memberEmail") String memberEmail) {
        System.out.println("memberEmail = " + memberEmail);
        return "체크완료";
    }

'강의 따라하기 > member2' 카테고리의 다른 글

게시판 프로젝트  (1) 2023.12.29
12_ajax 이메일 중복체크_중복체크 구현 완료  (1) 2023.12.28
11_로그아웃  (0) 2023.12.28
10_회원 삭제하기  (0) 2023.12.28
09. 회원정보 수정하기  (1) 2023.12.28

블로그의 정보

Hello 춘기's world

볼빵빵오춘기

활동하기