본문 바로가기
웹 - Ajax

웹 - Ajax - 회원목록/가입 예제2(id 체크, 회원 가입)

우가본 2024. 6. 25. 17:00

-> 데이터 추가

 

)insert_form.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<style type="text/css">
	#box{
		width:800px;
		margin:auto;
		margin-top: 100px;
	}

	th{
		vertical-align: middle !important;
		text-align: right;
		font-size: 18px; 
	}
	
	#id_msg{
		display: inline-block;
		width: 300px;
		height: 20px;
		margin-left: 10px;
	}
</style>

<!-- 주소 검색 API -->
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

<script type="text/javascript">

	function check_id(){
		
		// 회원가입 버튼은 비활성화
		// <input id="btn-register" type="button" ... diabled="disabled">
		$("#btn_register").prop("disabled", true);
		
		// 			 document.getElementById("mem_id").value
		let mem_id = $("#mem_id").val();
		if(mem_id.length==0){
			$("#id_msg").html("");
			return;
		}
		if(mem_id.length<3){
			$("#id_msg").html("아이디는 3자리 이상 입력하시오.").css("color","red");
			return;
		}
		
		// 서버에 현재 입력된 ID를 체크요청(jQuery Ajax이용)
		$.ajax({
			url		:	"check_id.do", 		// MemberCheckIdAction
			data	:	{"mem_id":mem_id},	// parameter	=> check_id.do?mem_id=one
			
			dataType:	"json",
			success	:	function(res_data){
				// res_data = {"result":true} or {"result":false}
				if(res_data.result){
					$("#id_msg").html("사용가능한 아이디입니다.").css("color","blue");
					// 가입버튼 활성화
					$("#btn_register").prop("disabled", false);
				} else {
					$("#id_msg").html("이미 사용 중인 아이디입니다.").css("color","orange");
				}
			},
			error	:	function(err){
				alert(err.responseText)
			}
		});		
	} // end:check_id()
	
	function find_addr(){	
		// 주소 검색 api
	    new daum.Postcode({
	        oncomplete: function(data) {
	            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
	            // 예제를 참고하여 다양한 활용법을 확인해 보세요.
	            $("#mem_zipcode").val(data.zonecode); // 우편번호 넣기
	            $("#mem_addr").val(data.address);	  // 주소 넣기
	        }
	    }).open();
	} // end - find_addr()
	
	function send(f){
		
		let mem_name 	= f.mem_name.value.trim();
		let mem_pwd	 	= f.mem_pwd.value.trim();
		let mem_zipcode = f.mem_zipcode.value.trim();
		let mem_addr	= f.mem_addr.value.trim();
		
		if(mem_name=='') {
			alert('이름을 입력하시오.');
			f.mem_name.value = "";
			f.mem_name.focus();
			return;
		}
		if(mem_pwd=='') {
			alert('비밀번호를 입력하시오.');
			f.mem_pwd.value = "";
			f.mem_pwd.focus();
			return;
		}
		if(mem_zipcode=='') {
			alert('우편번호를 입력하시오.');
			f.mem_zipcode.value = "";
			f.mem_zipcode.focus();
			return;
		}
		if(mem_addr=='') {
			alert('주소를 입력하시오.');
			f.mem_addr.value = "";
			f.mem_addr.focus();
			return;
		}
		
		f.action = "insert.do";	// MemberInsertAction
		f.submit();			    // 전송
	} // end - send()
	
</script>

</head>
<body>

<form class="form-inline"> <!--form-inline: 같은 항목을 한줄로 처리해줌 -->
	<div id="box">
		<div class="panel panel-primary">
			<div class="panel-heading"><h4>::::회원가입::::</h4></div>
			<div class="panel-body">
				<table class="table">
					<tr>
						<th>이름</th>
						<td><input style="width:50%;" class="form-control" name="mem_name"></td>
					</tr>
					<tr>
						<th>아이디</th>
						<td>
							<input style="width:50%;" class="form-control" name="mem_id" id="mem_id" 
								   onkeyup="check_id();">
							<span id="id_msg"></span>
						</td>
					</tr>
					<tr>
						<th>비밀번호</th>
						<td><input style="width:50%;" class="form-control" type="password" name="mem_pwd"></td>
					</tr>
					<tr>
						<th>우편번호</th>
						<td>
							<input style="width:50%;" class="form-control" name="mem_zipcode" id="mem_zipcode">
							<input class="btn btn-info" type="button" value="주소검색" onclick="find_addr();">
						</td>
					</tr>
					<tr>
						<th>주소</th>
						<td>
							<input style="width:100%;" class="form-control" name="mem_addr" id="mem_addr">
						</td>
					</tr>
					
					<tr>
						<td colspan="2" align="center">
							<input class="btn btn-success" type="button" value="목록보기"
								   onclick="location.href='list.do'">
							<input id="btn_register" class="btn btn-primary" type="button" value="가입하기" disabled="disabled"
								   onclick="send(this.form);">							
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</form>

</body>
</html>

 

)추가 폼 서블릿

package action.member;

import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * Servlet implementation class MemberInsertFormAction
 */
@WebServlet("/member/insert_form.do")
public class MemberInsertFormAction extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		// Dispatcher형식으로 호출
		String forward_page = "member_insert_form.jsp";
		RequestDispatcher disp = request.getRequestDispatcher(forward_page);
		disp.forward(request, response);

	}

}

 

)아이디 체크 서블릿

package action.member;

import java.io.IOException;
import java.io.PrintWriter;

import dao.MemberDao;
import db.vo.MemberVo;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class MemberCheckIdAction
 */
@WebServlet("/member/check_id.do")
public class MemberCheckIdAction extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		// /member/check_id.do?mem_id=one
		
		// 0. 수신인코딩 설정
		request.setCharacterEncoding("utf-8");
		
		// 1. parameter 받기
		String mem_id = request.getParameter("mem_id");
		
		// 2. mem_id에 해당되는 유저정보 검색
		MemberVo vo = MemberDao.getInstance().selectOne(mem_id);
		
		boolean bResult = (vo==null); // vo가 null이면 true(사용가능한 아이디 - 중복되는 데이터가 없다는 뜻)
		
		// 결과전송
		response.setContentType("application/json; charset=utf-8;");
		
		PrintWriter out = response.getWriter();
		
		String json = String.format("{\"result\":%b}", bResult);
		
		out.print(json);
		//response.getWriter.print(json); -> PrintWriter 생성할 필요 x
		

	}

}

 

)insertAction (vo - 생성자 추가,dao - insert 메서드 추가)

package action.member;

import java.io.IOException;

import dao.MemberDao;
import db.vo.MemberVo;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class MemberInsertAction
 */
@WebServlet("/member/insert.do")
public class MemberInsertAction extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		//	/member/insert.do?mem_name=박정환&mem_id=asdf&mem_pwd=1234&mem_zipcode=09696&mem_addr=서울시+동작구
		
		// 0.수신인코딩 설정
		request.setCharacterEncoding("utf-8");
		
		// 1.parameter 받기
		String mem_name 	= request.getParameter("mem_name");
		String mem_id 	 	= request.getParameter("mem_id");
		String mem_pwd 	 	= request.getParameter("mem_pwd");
		String mem_zipcode  = request.getParameter("mem_zipcode");
		String mem_addr 	= request.getParameter("mem_addr");
		
		//2.ip받기
		String mem_ip			= request.getRemoteAddr();
		
		// 3. MemberVO 포장
		MemberVo vo = new MemberVo(mem_name, mem_id, mem_pwd, mem_zipcode, mem_addr, mem_ip);
		
		// 4. DB insert
		int res = MemberDao.getInstance().insert(vo);
		
		// 5. 목록보기
		response.sendRedirect("list.do");

	}

}

'웹 - Ajax' 카테고리의 다른 글

웹 - Ajax - 팝업 창 기능1(모달기능)/제이쓴 라이브러리 설치 환경  (0) 2024.06.28
웹 - Ajax - 로그인 화면  (0) 2024.06.25
웹 - Ajax - 회원목록/가입 예제1 (조회까지)  (0) 2024.06.25
웹 - Ajax - 계산기 예제  (0) 2024.06.24
웹 - Ajax - 방명록  (0) 2024.06.24

'웹 - Ajax' Related Articles

티스토리툴바