카테고리 없음

ajax 3일차 id 중복검사

나이많은 초보 2022. 10. 6. 10:56 
<style >
	span.guide{
		display:none;
		font-size:12px;
		top:12px;
		right:10px;
	}
	span.ok{color: green}
	span.error{color:red}
</style>
</head>
<body>
<h1 align="center">회원가입</h1>
<div class="">
	<form action="/member/register.kh" method="post">
		<table>
			<tr>
				<td> * 아이디</td>
				<td>
					<input type="text" id="memberId" name="memberId">
					<span class="guide ok">이 아이디는 사용 가능합니다.</span>
					<span class="guide error">이 아이디는 사용 할 수 없습니다.</span>
				</td>
			</tr>
$("#memberId").keyup(function(){
	//	$("#memberId").on("blur",function(){	
			var memberId=$("#memberId").val();
			$.ajax({
				url:"/member/checkId.kh",
				type:"GET",
				data:{
					"memberId":memberId
				},
				success:function(data){
					console.log(data);
				
					if(data=="no"){
						$(".error").css("display",'inline');
						$(".ok").css("display","");
					}else{
						$(".error").css("display","");
						$(".ok").css("display",'inline');
					};
				},
				error:function(){
					alert("error");
				}			
				
			});
		});

blur은 포커스가 떠났을때

keyup은 키보드 입력되었다가  뛸때 반응한다. 한글자 계속누르면 이벤트 발생안되었을때...

input은 데이터가 입력되었을때  각각 이벤트 발생이 된다. 글자 하나 입력 및 삭제할때마다 이벤트 발생이된다.

//아이디 검사 ajax버전
	@ResponseBody
	@RequestMapping(value="/member/checkId.kh",method=RequestMethod.GET)
	public String memberIdCheck(
			@RequestParam("memberId") String memberId){
		System.out.println(memberId);
		try {
			Member member = mService.printOneById(memberId); // 기존의 member객체를 받는것
		//	int result=mService.checkDupId(memberId);
		
		if(!(member==null)) {
		//if(result>0) {
			return "no";			
		}else {
			return "yes";
		}	
		}catch (Exception e) {
			return "yes";
		}
	}

 

String 방식으로 데이터 전송은 같으나...객체를 확인할지, count로 갯수로 값을 받을지는 선택이다.