6일차 목표
회원가입
회원가입 한 아이디로 로그인 가능 ---- 완료
로그인 한 회원의 정보 확인
로그인 회원 글 리스트 확인 가능
해당 글 조회 가능
해당 글 수정 및 삭제 가능
로그아웃
5일차에 사실상 결과적으로 성공하지 못한 ajax에 대해서 어제 공부를 했다
포트폴리오를 진행하지는 못했지만 결과적으로 새로고침을 하지 않고 페이지에서 java로 데이터를 전송하는데 성공했다
오늘은 그 기능을 활용하여 id 중복 체크 및 비밀번호 가 같은지 확인해주는 작업 및 가능하다면 페이지들 간의 연계성도 오늘 정리해보면 좋을 것 같다
ajax 란??
ajax란 간단하게 설명하자면
페이지를 새로고침 하지 않은체 데이터를 주고받을 수 있는 기능
정도로 간단하게 생각하면 된다. 원래 Controller를 사용해서 데이터를 주고 받았지만
그렇게 되면 해당 url에 전송을 해서 새로고침을 받아야만했고 나는 그러기를 원하지 않아서
새로고침을 하지 않은체 데이터를 보내고 다시 데이터를 받아오는 작업을 하고 싶었고
그러다 찾게 된 것이 ajax 였다
ajax 기본 문법
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
반드시 헤드 사이에 jquery를 추가해주어야만 ajax를 사용할 수 있다
<script>
function id_check(){
alert("idCheck");
$.ajax({
type : "POST",
url : "/user/idcheck",
data : $('form').serialize(),
success : function(data) {
alert("성공")
},
error : function(error) {
alert("실패")
}
});
}
</script>
해당 코드에 대해서 간략하게 설명하자면
id_check()라는 Javascript가 발동 될 때
$.ajax가 실행된다
- type : post, get 방식 중 하나
- url : 보낸 url , 나는 Controller를 발동 시키기 위한 url을 작성했다
- data : 보낼 데이터, 나는 form 태그 안에 있는 모든 데이터를 보낼 것이기에 해당 코드를 작성
- seccess, error : ajax 데이터를 성공적으로 보냈을 때 실행할 데이터, 실패 했을 때 보낼 데이터
위 형식으로 데이터를 처리할 수있고
[Controller]
@ResponseBody
@RequestMapping(value="/idcheck")
public String idCheck(@RequestParam("id") String id) {
System.out.println("idchekc start");
System.out.println("id = " + id);
return null;
}Controller를 보면
어노테이션이 2가지 존재한다
- @ResoponseBody : 페이지에서 데이터를 받아오기위해서는 반드시 필요한 어노테이션
- @RequestMapping : ajax 에서 데이터를 주고 받을 방식을 정해주기에 RequestMapping으로 받는다
그리고 RequestParam에 id 라는 값을 String id에 저장하게 했는데
jsp 페이지에서 id라는 값을 가지고 있는 input 태그가 있었고 그 데이터를 RequestParam을 통해서 저장 해주게 된다
id 중복 체크
[jsp]
<script>
function id_check(){
$.ajax({
type : "POST",
url : "/user/idcheck",
data : $('form').serialize(),
success : function(num) {
if(num == 1){
alert("중복된 ID가 있습니다");
$('#id').val('');
}else{
alert("사용가능한 ID 입니다");
}
},
error : function(error) {
alert("실패")
}
});
}
</script>
ajax를 통해서 controller의 /user/idcheck를 받는 메소드를 실행시키며 form 태그의 데이터를 전부 가져간다 controller를 먼저 보자
[Controller]
@ResponseBody
@RequestMapping(value="/idcheck")
public int idCheck(@RequestParam("id") String id,Model model) {
UserVO vo = new UserVO();
vo.setId(id);
int num = service.idcheck(vo);
return num;
}Controller에서 ajax로 온 데이터 id를 setter를 통해서 UserVO에 저장한 뒤 mapper를 실행한다
[Mybatis]
<!-- idcheck -->
<select id="idcheck" resultType="int">
select count(*) from test_user where id=#{id}
</select>
count를 통해서 중복 된 id가 있을 때는 1을, 없을 때는 0을 반환하고 해당 데이터를 Controller에서 jsp로 반환해준다
jsp페이지를 다시 보면 1일 때는 중복된 id가 있다고 알리고, 해당 id 라는 name을 가진 input 태그를 초기화 시켜주는 코드를 작성하였고, 0이 반환 되었을 때는 사용할 수 있는 id라고 알림창을 띄우도록 작성했다
회원가입 폼
[jsp - javaScript]
<script>
function id_check(){
$.ajax({
type : "POST",
url : "/user/idcheck",
data : $('form').serialize(),
success : function(num) {
if(num == 1){
alert("중복된 ID가 있습니다");
$('#id').val('');
}else{
alert("사용가능한 ID 입니다");
}
},
error : function(error) {
alert("실패")
}
});
}
$('.pw').focusout(function(){
var pwd1 = $('#password1').val();
var pwd2 = $('#password2').val();
if(pwd1 != pwd2){
$('#passwordCheck').html('비밀번호가 다릅니다');
$('#passwordCheck').css('color','red');
}else{
$('#passwordCheck').html('비밀번호가 일치합니다');
$('#passwordCheck').css('color','blue');
}
})
$('.ph1').focusout(function(){
var ph1 = $('.ph1').val();
if(ph1.length > 4){
alert("전화번호 중간 자리는 4자리 이하여야 합니다");
$('.ph1').val('').focus();
}
})
$('.ph2').focusout(function(){
var ph2 = $('.ph2').val();
if(ph2.length > 4){
alert("전화번호 마지막 자리는 4자리 이하여야 합니다");
$('.ph2').val('').focus();
}
})
function formCheck(){
var id = $('#id').val();
var pwd1 = $('#password1').val();
var pwd2 = $('#password2').val();
var ph1 = $('#phone2').val();
var ph2 = $('#phone3').val();
var name = $('#name').val();
if(id == ''){
alert('id를 입력해주세요');
$('#id').focus();
return false;
}else if(pwd1 == ''){
alert('비밀번호를 입력해주세요');
$('#password1').focus();
return false;
}else if(pwd2 == ''){
alert('비밀번호를 확인해주세요');
$('#password2').focus();
return false;
}else if(name == ''){
alert('이름을 입력해 주세요');
$('#name').focus();
return false;
}else if(ph1 == ''){
alert('휴대폰 번호를 입력해 주세요');
$('#phone2').focus();
return false;
}else if(ph2 == ''){
alert('휴대폰 번호를 입력해 주세요');
$('#phone3').focus();
return false;
}
}
</script>위의 코드에서 javaScript를 통해서 빈칸을 넣었을 때 알림창이 뜨게 코드를 작성했다
여기서 주목해야할 점은 마지막 formCheck에서 return 값을 받는다는 것이 중요하다
formCheck를 사용한 jsp 구문을 보자
[jsp]
<form action="/user/joinMember" method="post" onsubmit="return formCheck();">
<label>아이디</label><br>
<input type="text" name="id" id="id" placeholder="id"><br>
<button type="button" onclick="id_check()">중복 확인</button>
<br>
<label>비밀번호</label><br>
<input type="password" name="password" id="password1" class="pw" placeholder="password"><br>
<input type="password" id="password2" class="pw" placeholder="password check"><br>
<div id="passwordCheck"></div>
<br>
<label>이름</label><br>
<input type="text" name="name" id="name" placeholder="name"><br>
<br>
<select name="phone1" id="phone1">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
</select> -
<input type="text" name="phone2" id="phone2" placeholder="0000"> -
<input type="text" name="phone3" id="phone3" placeholder="0000">
<br><br>
<input type="submit" value="전송">
<input type="reset" value="초기화">
<input type="hidden" name="value" value="Norway">
</form>주목해야할 점은 onsubmit 이라고 적힌 부분이다
단순히 onsubmit이라는 것은 form에서 submit으로 전송하기 전에 반드시 실행하는 JS인데
여기서 return이 적힌 이유는 return 값이 true이면 정상적으로 form을 submit 하고
false이 나오면 submit을 보내지 않는다
그렇기 때문에 위의 formCheck() 인 JS에서 만약 아무것도 입력되어있지 않은 창이 있을 때는
form의 데이터를 Controller로 보내지 않게 설정했다
하지만 문제가 있다
데이터가 차있지 않을때는 submit을 하지 않도록 설정해뒀지만
만약 ID 중복확인을 안하거나 ID 중복 확인을 하고 난 뒤 ID를 바꿨을 때 그것을 막을 방법이없다
그 방법을 내일 해결해보도록 하자
