데일리로그C:
article thumbnail
Published 2023. 5. 16. 10:34
id,pw 찾기(이중탭, ajax) JAVA/spring

 

[ idSearch.jsp ]

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/views/include/header.jsp" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디찾기</title>

<style>
	a {
		text-decoration: none;
		color:black;
		cursor: pointer;
	}
	
	input[type=text] {
		margin:5px;
	}
	
	.btn_ck {
		display: none;
	}

	.ck_box {
		margin:5px 0px;
	}
	
	input[type=button] {
		background-color: #f26b2b;
		border:none;
		color:white;
		font-size: 13px;
		font-weight: bolder;
		width:170px;
		height:30px;
		margin-bottom: 20px;
		margin-top:10px;
	}
	
	.container{
		width: 400px;
		margin: 0 auto;
	}
	
	/* tab 메뉴 */
	ul.tabs{
		display: flex;
		justify-content:flex-start;
		align-items:center;
		list-style: none;
		/* border:1px solid red; */
	}
	ul.tabs li{
		display: inline-block;
		cursor: pointer;
		border-bottom:2px solid #666;
		width:150px;
		padding:10px 0px;
		
	}
	
	ul.tabs li.current{
		width:150px;
		padding:10px 0px;
		color: #f26b2b;
		font-weight:bolder;
		border-bottom:2px solid #f26b2b;
		text-align: center;
		
	}
	/* tab 메뉴 끝 */
	
	/* tab 내용  */
	.tab-content{
		display: none;
		/* border:1px solid green; */
	}
	
	.tab-content.current{
		display: inherit;
		/* border:1px solid orange; */
	}
	
	.t_tab-1 {
		display:inherit;
		
	}
	
	.t_tab-2 {
		display: none;
	}
	
	.radio {
		display: none;
	}
</style>


<script>
// 아이디
function tab_result(str){
	var id_name = $("#name").val();
	var id_name2 = $("#name2").val();
	var id_email = $("#email").val();
	var id_phone = $("#phone").val();
	var radio_ck = $("input[type=radio][name=radio_ck]:checked").val();

	//alert(radio_ck);
	
	$.ajax({
		url:"/member/idSearch", //전송받을 페이지 경로
		type: "post", //데이터 읽어오는 방식
		dataType: "text", //데이터 방식
		data: "code="+str+"&radio_ck="+radio_ck+"&name="+id_name+"&name2="+id_name2+"&email="+id_email+"&phone="+id_phone, //데이터 전달
		error:function(){ //실패일 경우
			alert("실패");
		},
		success:function(text){ //성공일 경우
			$("#result_id").html(text);
		}
	});
}

//비밀번호
function tab_result2(str){
	
	var aaa = $("li").attr("data-tab");
	//alert(aaa);
	
	var pass_id = $("#id").val();
	var pass_name = $("#name3").val();
	var pass_phone = $("#phone2").val();
	
	$.ajax({
		url:"/member/idSearch", //전송받을 페이지 경로
		type: "post", //데이터 읽어오는 방식
		dataType: "text", //데이터 방식
		data: "code="+str+"&id="+pass_id+"&name3="+pass_name+"&phone2="+pass_phone, //데이터 전달
		error:function(){ //실패일 경우
			alert("실패");
		},
		success:function(text){ //성공일 경우
			$("#result_pw").html(text);
   
		}
	});
}
</script>

</head>
<body>
<center>
<div style="margin-bottom: 20px;">
	<a href="/"><h3>MoonWorld</h3></a>
</div>

<script>
//아이디찾기, 비밀번호찾기 tab
$(document).ready(function(){
	$('ul.tabs li').click(function(){
		var tab_id = $(this).attr('data-tab');
		//alert(tab_id);

		$('ul.tabs li').removeClass('current');
		$('.tab-content').removeClass('current');

		$(this).addClass('current');
		$("#"+tab_id).addClass('current');
	});
});

// 휴대폰, 이메일 tab
$(document).ready(function(){ 
	//$(".resultArea > div").last().hide();
	
	var radioContent = $(".resultArea > div");
	
	$("input[name='radio_ck']").click(function(){
		radioContent.hide();
		radioContent.eq($("input[name='radio_ck']").index(this)).show();
	});
});
</script>

<form name="id_S" method ="post" onsubmit="return id_s_ok()">
<div class="container">
	<ul class="tabs">
		<li class="tab1 current" id="tab1" data-tab="tab-1">아이디찾기</li>
		<li class="tab2" id="tab2" data-tab="tab-2">비밀번호찾기</li>
	</ul>
	<div id="tab-1" class="tab-content current">
		<div class="ck_box">
			<input type="radio" name="radio_ck" id="ck" class="radio_ck" value="p" checked <c:if test="${radio_ck == 'p'}">checked</c:if>>
			<label for="ck1">휴대폰</label> &nbsp;&nbsp; 
			<input type="radio" name="radio_ck" id="ck" class="radio_ck" value="e" <c:if test="${radio_ck == 'e'}">checked</c:if>>
			<label for="ck2">이메일</label> <br>
		</div>
		<div class="resultArea">
			<div name="cont1" id="cont1" class="t_tab active">
				<input type="text" name="name" id="name" placeholder="이름"> <br>
				<input type="text" name="phone" id="phone" placeholder="전화번호">
			</div>
			<div name="cont2" id="cont2" class="t_tab" style="display:none;">
				<input type="text" name="name2" id="name2" placeholder="이름"> <br>
				<input type="text" name="email" id="email" placeholder="이메일">
			</div>
		</div>
		<input type="button" onclick="tab_result('id')" value="찾기">
		<div id="result_id"></div>
	</div>
	<div id="tab-2" class="tab-content">
		<input type="text" name="id" id="id" placeholder="아이디" style="margin-top:20px;"> <br>
		<input type="text" name="name3" id="name3" placeholder="이름"> <br>
		<input type="text" name="phone2" id="phone2" placeholder="전화번호"> <br>
		
		<input type="button" onclick="tab_result2('pass')" value="찾기">
		<div id="result_pw"></div>
	</div>
</div>
</form>
</center>

</body>
</html>

 

[ SearchDTO.java ]

package org.zerock.dto;

import lombok.Data;

@Data
public class SearchDTO {

	private String code;
	private String id;
	private String pw;
	private String name;
	private String name2;
	private String name3;
	private String email;
	private String phone;
	private String phone2;
	private String radio_ck;
}

 

[ MemberController.java ]

@GetMapping("/idSearch")
public void idSearchGET() throws Exception {
    //logger.info("아이디찾기 get==");
}

 

[ MemberDAO.java ]

public MemberVO idSearch(SearchDTO s_dto) throws Exception; //아이디찾기(p)
public MemberVO idSearch2(SearchDTO s_dto) throws Exception; //아이디찾기(e)
public MemberVO pwSearch(SearchDTO s_dto) throws Exception; //비밀번호찾기

 

[ MemberDAOImpl.java ]

@Override
public MemberVO idSearch(SearchDTO s_dto) throws Exception {
    return sqlSession.selectOne(namespace+".idSearch", s_dto);
}


@Override
public MemberVO idSearch2(SearchDTO s_dto) throws Exception {
    return sqlSession.selectOne(namespace+".idSearch2", s_dto);
}

@Override
public MemberVO pwSearch(SearchDTO s_dto) throws Exception {
    return sqlSession.selectOne(namespace+".pwSearch", s_dto);
}

 

[ MemberService.java ]

public MemberVO idSearch(SearchDTO s_dto) throws Exception; //아이디찾기(p)
public MemberVO idSearch2(SearchDTO s_dto) throws Exception; //아이디찾기(e)
public MemberVO pwSearch(SearchDTO s_dto) throws Exception; //비밀번호찾기

 

[ MemberServiceImpl.java ]

@Override
public MemberVO idSearch(SearchDTO s_dto) throws Exception {
    return dao.idSearch(s_dto);
}

@Override
public MemberVO idSearch2(SearchDTO s_dto) throws Exception {
    return dao.idSearch2(s_dto);
}

@Override
public MemberVO pwSearch(SearchDTO s_dto) throws Exception {
    return dao.pwSearch(s_dto);
}

 

[ MemberMapper.xml ]

<select id="idSearch" resultType="MemberVO">
    select id from member where name=#{name} and phone=#{phone}
</select>

<select id="idSearch2" resultType="MemberVO">
    select id from member where name=#{name2} and email = #{email}
</select>

<select id="pwSearch" resultType="MemberVO">
    select pw from member where id=#{id} and name=#{name3} and phone=#{phone2}
</select>

 

[ MemberController.java ]

@ResponseBody
@PostMapping(value="/idSearch", produces="text/plain;charset=UTF-8")
public String idSearchPOST(SearchDTO s_dto, MemberVO m, String code, String radio_ck) throws Exception{

    logger.info("아이디찾기 post==");
    logger.info(s_dto.toString());
    logger.info("====code:"+code);
    logger.info(radio_ck);

    if(code.equals("pass")) {
        m = service.pwSearch(s_dto);

        return "<div>회원님의 비밀번호는 <span style='border-bottom:2px solid red;'> "+m.getPw()+" </span>입니다.</div>";	
    }else {			
        if(radio_ck.equals("p")) {
            m = service.idSearch(s_dto);				
        }else if(radio_ck.equals("e")){
            m = service.idSearch2(s_dto);	
        } 
        return "<div>회원님의 아이디는 <span style='border-bottom:2px solid red;'> "+m.getId()+" </span>입니다.</div>";
    }
}
저작자표시 (새창열림)

'JAVA > spring' 카테고리의 다른 글

log4j 설정  (0) 2023.05.17
소소한 로직 정리  (0) 2023.05.16
총정리  (0) 2023.05.10
Board_fullcode  (0) 2023.05.09
member_fullcode  (0) 2023.05.09
profile

데일리로그C:

@망밍

포스팅이 도움됐다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

profile on loading

Loading...

검색 태그

스파르타
자바스크립트
코딩오류
좋아연
3주차
서버
5주차
.value
코딩
HTML
나홀로메모장
Robo3T
모두의책리뷰
메디방
MongoDB
데이터베이스
파이썬
CSS
몽고DB
AWS
웹개발
앱개발
on속성
포뇨
짱구인형
그림
PROJECT
4주차
개발일지
적응중..

티스토리툴바