spring jQuery Ajax를 이용한 아이디 중복검사

박예린·2023년 2월 22일

jQuery Ajax를 이용한 아이디 중복검사

-회원가입 양식이나, 여러가지 입력 폼을 만들었을 때 만약 중복검사를 하게 되면 페이지가 이동되어 이전에 작성했던 내용들이 사라지는 일들이 빈번히 일어남.
이 점을 보완하기 위해 사용자가 바로바로 확인할 수 있도록 Ajax를 이용해서 새로고침이 이루어지지않는 아이디 중복 검사를 구현

바로 전 게시물에 올렸던 프로젝트에 추가하여 구현할 예정.

아이디 중복 검사

home.jsp

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>

<h1>home</h1>

<table border="1">
<tr>
	<th>번호</th><th>id</th><th>pw</th><th>name</th><th>email</th>
</tr>
<%
	for(int i = 0;i < list.size(); i++){
		MemberDto dto = list.get(i);
	%>
	<tr>
		<th><%=i + 1 %></th>
		<td><%=dto.getId() %></td>
		<td><%=dto.getPwd() %></td>
		<td><%=dto.getName() %></td>
		<td><%=dto.getEmail() %></td>
	</tr>
	<%
	}	
%>

</table>

<br><br>
<!-- ajax(비동기통신) send(String) recv(String)  -->
id : <input type="text" id="checkid"><br><br>
<button type="button" onclick="idcheckBtn()">아이디 체크</button>

<script type="text/javascript">
//아이디 체크
function idcheckBtn(){
	$.ajax({
		url:"idcheck.do",
		type:"get", //get,post방식
		//data:"id=" + $("#checkid").val(), //밑 코드와 같음. 이렇게도 쓸 수 있음(파라미터값으로 가져옴)
		data:{"id":$("#checkid").val()}, //위 코드와 같음. 이렇게도 쓸 수 있음
		success:function(msg){
			//alert('success'); //성공
			alert(msg); //OK
		},
		error:function(){
			alert('error'); //실패
		}
	})
}
</script>

MemberController.java

package mul.cam.a.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import mul.cam.a.dto.MemberDto;
import mul.cam.a.service.MemberService;

@Controller
public class MemberController {
	//service 접근(생성)
	@Autowired
	MemberService service;
	
	@RequestMapping(value = "home.do", method=RequestMethod.GET)
	public String home(Model model) {
		//들어오는 값은 없지만 나가는값은 있음
		
		//짐싸!
		List<MemberDto> list = service.allMember();
		model.addAttribute("list",list);
		
		return "home"; //home.jsp로 이동
	}
	
	//ajax part
	@ResponseBody //-> ajax통신 의미
	@RequestMapping(value = "idcheck.do", 
					method = RequestMethod.GET,
					produces="application/String; charset=utf-8")//한글은 읽지 못하므로 String일때만 이 코드로 utf-8변환  
	public String idcheck(String id) { //(home.jsp에 ajax)id를 통해서 통해서 data:{"id":$("#checkid").val()} 접근
		System.out.println("id: " + id);
		
		String msg = "OK"; //보내주는 message
		return msg; //OK return
		/*
		 * @ResponseBody를 안붙이면 return msg; -> msg.jsp를 찾게됨(실습 시 404error뜸)
		 * ajax임을 알리기 위해서는 @ResponseBody 어노테이션 써야 함.
		 */
	}}

send, receive

home.jsp

<!-- send(object) recv(list) -->
id:<input type="text" id="id" value="gdhong"><br>
pw:<input type="text" id="pwd" value="1234"><br>
name:<input type="text" id="name" value="홍길동"><br>
email:<input type="text" id="email" value="gdhong@naver.com"><br>
<button type="button" id="account">회원가입</button>

<script type="text/javascript">
$("#account").click(function(){
	
	// servlet-context.xml에 ajax 사용허가를 설정
	/* 데이터를 member로 모음 */
	let member = {
			"id":$("#id").val(),
			"pwd":$("#pwd").val(),
			"name":$("#name").val(),
			"email":$("#email").val(),
			"auth":0
	};
	
	/* ajax로 보냄 */
	$.ajax({
		url:"account.do",
		type:"GET",
		dataType:"json",
		data:member,
		async:true,
		success:function( list ){
			// alert('success');
			// alert(JSON.stringify(list));
			
			alert(list[1].name);
			
		},
		error:function(){
			alert('error');
		}
	});

});

MemberController.java

@ResponseBody
	@RequestMapping(value = "account.do", method = {RequestMethod.GET, RequestMethod.POST})
	public List<MemberDto> account(MemberDto dto){
		System.out.println(dto.toString());
		
		List<MemberDto> list = new ArrayList<>();
		list.add(new MemberDto("abc", "123", "abc", "aemail", 0));
		list.add(new MemberDto("bcd", "234", "bcd", "bemail", 0));
		list.add(new MemberDto("cde", "345", "cde", "cemail", 0));
				
		return list;
	}