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
볼빵빵오춘기