jQuery Ajax를 이용한 아이디 중복검사
- 우리가 회원가입 양식이나, 여러가지 입력 폼을 만들었을 때 만약 중복검사를 하게 되면 페이지가 이동되어 이전에 작성 했던 내용이 사라지는 부분이 많이 불편했다. 이 점들을 보완해서 사용자가 바로바로 확인할 수 있도록 ajax를 이용해서 새로고침이 이루어지지 않는 아이디 중복 검사를 간단하게 구현해보자.
[ 준비 작업 ]
- 이전 준비 작업과 동일하며 추가적으로 WEB-INF > views > login 폴더를 생성하고 ex01.jsp을 만들자.
- 예제를 위한 임의의 테이블 tblUser를 만들고 컬럼에 id를 추가해서 몇개만 미리 넣어두자.
[ 아이디 중복 검사 예제 ]
1) JSP (ex01.jsp)
- 기본적인 아이디 입력 폼 양식과 중복 체크 검사 결과를 알려줄 span태그를 한개 설정한다.
<h2>아이디 중복검사</h2>
<table class="table table-bordered">
<tr>
<th>아이디</th>
<td>
<input type="text" name="txtid" id="txtid" class="form-control" />
<input type="button" id="btnCheck" class="btn btn-default" value="중복검사"/>
<span id="result"></span>
</td>
</tr>
</table>
2) Script(ex01.jsp)
- 먼저 아이디가 입력을 했는지 안했는지 여부를 검사를 한다.
- 요청할 URL은 idcheck.action으로 지정한다.
- 넘겨줄 데이터값(id)를 지정해준다.
- DB작업으로 반환된 값이 0이라면 사용 가능한 아이디이며, 아니라면 이미 사용한 아이디입니다 라고 출력해준다.
$('#btnCheck').click(function () {
if ($('#txtid').val() != '') {
// 아이디를 서버로 전송 > DB 유효성 검사 > 결과 반환받기
$.ajax({
type: 'GET',
url: '/ajax/login/idcheck.action',
data: 'id=' + $('#txtid').val(),
dataType: 'json',
success: function(result) {
if (result == '0') {
$('#result').text('사용 가능한 아이디입니다.');
} else {
$('#result').text('이미 사용중인 아이디입니다.');
}
},
error: function(a, b, c) {
console.log(a, b, c);
}
});
} else {
alert('아이디를 입력하세요.');
$('#txtid').focus();
}
});
3) Controller (AjaxController.java)
- 아이디를 입력하는 화면 ex01과 중복검사를 실행할 idcheck를 따로 만든다.
- idcheck에서는 데이터 id 값을 받았으므로 매개변수에 String id를 추가한다.
- 넘겨줄 값이 1또는 0이므로 int로 지정한다.
@RequestMapping(value = "/login/ex01.action", method = { RequestMethod.GET })
public String ex01(HttpServletRequest req, HttpServletResponse resp, HttpSession session) {
return "login/ex01";
}
@RequestMapping(value = "/login/idcheck.action", method = { RequestMethod.GET })
@ResponseBody
public int idcheck(HttpServletRequest req, HttpServletResponse resp, HttpSession session, String id) {
int result = dao.idcheck(id);
return result;
}
4) DB작업 (AjaxDAO.java)
@Repository
public class AjaxDAO {
@Autowired
private SqlSessionTemplate template;
public int idcheck(String id) {
return template.selectOne("ajax.idcheck", id);
}
}
5) 쿼리 작성 (ajax.xml)
- count 함수로 1이라면 "존재", 0이라면 "존재하지 않음" 을 알 수 있다.
- 테이블은 기존에 사용했던 tblAjaxUser가 아닌 예제를 위해 임의로 만든 tblUser를 사용한다.
<select id="idcheck" parameterType="String" resultType="Integer">
select count(*) from tblUser where id = #{ id }
</select>
- 결과화면
MEMO>
# 아이디 중복 검사 흐름은 이런식으로 기억하자.
아이디를 서버에 전송 -> DB 유효성 검사(중복체크) -> 결과 반환받기
# 반복문을 사용할 때 자바스크립트에서는 forEach, 제이쿼리에서는 each를 사용한다!!
# 데이터를 일방적으로 보내기만 한다면 ajax 프로퍼티에서 dataType과 success는 안쓰인다!
# GET은 필요로 하는 정보를 요청할 때(select)
POST는 정보를 추가, 수정, 삭제 할 때(insert, update, delete) 쓰인다.
# json 형식으로 자동 변환해주는 어노테이션 @ResponseBody !!!
'교육 > Spring' 카테고리의 다른 글
Spring 개발자 수업 108일차 - jQuery Ajax를 이용한 post-it 메모장 만들기(생성, 확인) (0) | 2021.08.30 |
---|---|
Spring 개발자 수업 107일차 - 휴강 (0) | 2021.08.28 |
Spring 개발자 수업 105일차(1) - jQuery Ajax를 이용한 데이터 가져오기/보내기 (0) | 2021.08.25 |
Spring 개발자 수업 104일차 - jQuery Ajax, 동기와 비동기 방식 (0) | 2021.08.24 |
Spring 개발자 수업 103일차 - Ajax (0) | 2021.08.23 |
댓글