<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>닉네임 체크(ajax)</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.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>
<!-- jquery cdn -->
<!-- javascript 작성 공간 -->
<script>
$(function(){
$("[name=memberNickname]").blur(function(e){
var nickname = $(this).val();
if(nickname.length == 0) return;
$.ajax({
url:"http://localhost:8080/nicknameCheck",
method:"post",
data:{//post일 경우만 사용 가능
memberNickname : nickname
},
success:function(response){
//(주의) 여기서의 this는 ajax 실행 객체(태그가 아님)
$(e.target).removeClass("success fail");
if(response == "Y") {
$(e.target).addClass("success");
$(".display").text("사용 가능한 닉네임");
}
else {
$(".display").text("이미 사용중인 닉네임");
$(e.target).addClass("fail");
}
},
error:function(){
alert("통신 오류");
},
});
});
});
</script>
</head>
<body>
<div class="container w-500">
<div class="row">
<h1>닉네임 검사</h1>
</div>
<div class="row left">
<input type="text" name="memberNickname" class="form-input w-100">
</div>
<div class="row left display">
<!--메세지 출력 위치-->
</div>
</div>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 차트 (0) | 2023.11.06 |
|---|---|
| ajax 템플릿 (0) | 2023.11.03 |
| 비동기통신(ajax) 아이디 체크 (0) | 2023.11.01 |
| 비동기통신(ajax) (0) | 2023.10.31 |
| 회원가입(jQuery) 바형태의 최종디자인 (1) | 2023.10.30 |