<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인증번호 보내기</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css"
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
</style>
<!-- swiper cdn -->
<!-- jquery cdn -->
<!-- javascript 작성 공간 -->
<script>
$(function () {
//처음에 로딩아이콘 숨김
$(".btn-send").find(".fa-spinner").hide();
$(".cert-wrapper").hide();
//인증번호 보내기 버튼을 누르면
//서버로 비동기통신을 보내 인증 메일 요청
$(".btn-send").click(function () {
var email = $("[name=memberEmail]").val();
if (email.length == 0) return;
$(".btn-send").prop("disabled", true);
$(".btn-send").find(".fa-spinner").show();
$(".btn-send").find("span").text("이메일 발송중");
$.ajax({
url: "http://localhost:8080/rest/cert/send",
method: "post",
data: { certEmail: email },
success: function () {
$(".btn-send").prop("disabled", false);
$(".btn-send").find(".fa-spinner").hide();
$(".btn-send").find("span").text("인증번호 보내기");
window.alert("이메일 확인하세요!");
$(".cert-wrapper").show();
window.email= email;
},
})
});
//확인 버튼을 누르면 이메일과 인증번호를 서버로 전달
$(".btn-cert").click(function () {
// var email = $("[name=memberEmail]").val();
var email = window.email;
var number = $(".cert-input").val();
if (email.length == 0 || number.length == 0) return;
$.ajax({
url: "http://localhost:8080/rest/cert/check",
method: "post",
data: {
certEmail: email,
certNumber: number
},
success: function (response) {
console.log(response);
console.log(response.result);
if (response.result) {//인증성공
$(".cert-input").removeClass("success fail")
.addClass("success");
//상태객체에 상태를 저장하는 코드
$(".btn-cert").prop("disabled", true);
}
else {
$(".cert-input").removeClass("success fail")
.addClass("fail");
//상태객체에 상태를 저장하는 코드
}
}
})
});
});
</script>
</head>
<body>
<input type="email" name="memberEmail">
<button class="btn-send">
<i class="fa-solid fa-spinner fa-spin"></i>
<span>인증번호 보내기</span></button>
<div class="cert-wrapper">
<input type="text" class="cert-input">
<button class="btn-cert">확인</button>
</div>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 카카오 지도 다루기 3(주소로 지도 찾기) (0) | 2023.11.17 |
|---|---|
| 카카오 지도 다루기 2 (0) | 2023.11.16 |
| 카카오 지도 다루기 (1) | 2023.11.15 |
| Kakao 지도 시작하기 (0) | 2023.11.14 |
| 파일 업로드2 (0) | 2023.11.13 |