project 2. 2 My first website/ 아이디, 비밀번호 찾기 페이지

Ajax를 이용하여 백앤드 결과값(아이디, 임시비밀번호) 받아 프론트에 뿌려주기

 

결과는 아래와 같이 나온다!

 

 

 

1. View (findId.jsp , findPw.jsp)

기본 html은 너무기본적인 내용이라 생략

스크립트 (ajax) 위주로 정리

 

1) findId 

<script>

$(document).ready(function (){ // 화면이 켜지면 바로 함수실행

fn_findId();

});

 

 

function fn_findId() { 

$('#findIdBtn').click(function(){ // FIND ID 버튼이 클릭되면 아래 ajax실행 

 

$.ajax({

url:'/MYHOME_P/findId.member', // 이동할 컨트롤러 주소. 

type: 'get', //요청방식 : get

data: 'mEmail=' + $('#mEmail').val(), // 보낼 데이터

dataType: 'json', //받을 데이터 타입

success: function(result) { // 성공하면 결과값을 받을건데

if(result.resultId =='none') { // resultId 가 "none"이면 아래 텍스트를 띄워줌  -> 요 텍스트는 FIND ID 밑에 div를 심어놓음

$('#findIdResult').text('The email address that you\'ve entered doesn\'t match any account.');

$('#findIdResult').css('color','#17a2b8').css('font-size','large');

}else { // resultId 가 "none"이 아니라면 아래 텍스트를 띄워줌  -> 요 텍스트는 FIND ID 밑에 div를 심어놓음

$('#findIdResult').text('Your Id is \' ' + result.resultId + ' \'' );

$('#findIdResult').css('color','#dc3545').css('font-size','large');

}

},

error: function() {

alert('error');

}

});

});

}

 

</script>

 

 

2) findPw 

방법이 너무 똑같아서 같은부분들은 설명은 생략 

 

<script>

//page load event

$(document).ready(function(){

fn_findPw();

});

 

function fn_findPw() {

$('#findPwBtn').click(function() {

$.ajax({

url: '/MYHOME_P/findPw.member',

type: 'post', // 요청방식:post (프론트에서 정보를 보냄)

data: $('#f').serialize(), 데이터는 form에 있는걸 정렬하여 보내주겠다(serialize()). 

dataType: 'json',

success: function(obj){

if (obj.isMember) {

$('#findPwResult').text('Your temporary password is \' ' + obj.tempPw + ' \' ');

$('#findPwResult').css('color','#dc3545').css('font-size','large');

} else {

$('#findPwResult').text('No matching users found.');

$('#findPwResult').css('color','#17a2b8').css('font-size','large');

}

},

error: function(){

alert('error');

}

 

});

});

}

 

</script>

 

 

2. controller

 

case "/findId.member":

ajaxCommand = new FindIdCommand();

result = ajaxCommand.execute(request, response);

out.print(result);

break;

 

case "/findPw.member" :

ajaxCommand = new FindPwCommand();

result = ajaxCommand.execute(request, response);

out.println(result); // $.ajax의 success: function(result){}

break;

 

 

 

3. Command

 

* 기본이 되는 ajaxcommand interface

public interface AjaxCommand {

public String execute(HttpServletRequest request, HttpServletResponse response)throws Exception;

}

 

1) FindIDCommand

 

dto에 dao에서 받은 mEmail(멤버이메일주소)을 실어주고

dto에 해당 멤버 이메일이 있나 검색해봄

 

json결과 생성할때

mDto의 결과값이 존재한다면, 해당 이메일주소와 일치하는 mId (멤버 아이디를 꺼내와서 JSON으로 보내주기

 

 

2) FindPwCommand

 

얘는 조금 복잡

받는값이 2개 이므로 (mId, mPhone) 다오에서도 멤버디티오를 통째로 보내줘 resultDto를 만들어버렸다. 

쿼리 실행에서 문제없이 작동이 되었다면(mId와 mPhone값이 일치하는 멤버를 찾았다면) 리절트디티오가 null이 아닐터, 그런경우 랜덤으로 임시 비밀번호값을 생성하여 stringbuffer를 이용하여(isMember true) 값을 프론트로 실어준다. 

아닐경우에는 프론트쪽에서 그냥 일치하는데이터가없다고 값없이 뿌려주면 됨.

 

 

 

4. Dao

 

1) FindId

public MemberDto selectBymEmail(String mEmail) {

SqlSession ss = factory.openSession();

MemberDto resultDto = ss.selectOne("mybatis.mapper.member.selectBymEmail",mEmail);

ss.close();

return resultDto;

}

 

2) FindPw

public MemberDto selectBymIdmPhone(MemberDto mDto) {

SqlSession ss = factory.openSession();

MemberDto resultDto = ss.selectOne("mybatis.mapper.member.selectBymIdmPhone",mDto);

ss.close();

return resultDto;

}

 

 

5. xml

 

1) FindId

<select id="selectBymEmail" parameterType="String" resultType="dto.MemberDto"> 

SELECT *

  FROM MEMBER2

WHERE MEMAIL = #{mEmail}

</select>

 

2) FindPw

<select id="selectBymIdmPhone" parameterType="dto.MemberDto" resultType="dto.MemberDto">

SELECT *

  FROM MEMBER2

WHERE 1 = 1 // 무조건 일치하는 식

    AND MID = #{mId}

    AND MPHONE = #{mPhone}

</select>

 

 

 

 

 

*잘못입력했을 때 나오는 화면*