230302_web2(6) - 아이디중복확인

[회원가입2]

 

MemberJoin2.java

1.
@WebServlet("/member/join2")
public class MemberJoin2 extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public MemberJoin2() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    	
    	//넘겨야할 변수가 있다면 request.setAttribute 이용
    	
    	RequestDispatcher dis = request.getRequestDispatcher("join2.jsp");
    	dis.forward(request, response);
    	
    }
}

 

<방법1>

 

 

join2.jsp

2. 
<span onclick="id_ok(join2.m_id.value)">[중복확인]</span>
<div id="id_result"></div>

3. 
<script>
	function id_ok(id) {
		
		//var id = $("#id").val(); 보다는 매개변수 넘기는게 나을 듯!
		
		$.ajax({
			url: "idok", //전송받을 페이지 경로(상대경로) servlet
			type: "post", //데이터 읽어오는 방식
			dataType: "text", //데이터 방식
			data: "id="+id,
			error:function(){ //실패일 경우
				alert("실패");
			},
			success:function(text){ //성공일 경우
				$("#id_result").html(text);
			}
		});
	}
</script>


추가적으로 이런 형식으로도 가능
<form>
<input id="id_check" name="id_check">

$.ajax({
    url: "idok", //전송받을 페이지 경로(상대경로) servlet
    type: "post", //데이터 읽어오는 방식
    dataType: "text", //데이터 방식
    data: "id="+id,

    success:function(text){ //성공일 경우
        if(text == "1") {
            $("#id_result").html("<font color=red>존재하는 아이디입니다.</font>");
            $("#id_check").val("no"); // input
        } else if(text == "2") {
            $("#id_result").html("<font color=blue>사용 가능한 아이디입니다.</font>");
            $("#id_check").val("yes"); // input
        }

    },
    error:function(){ //실패일 경우(404, 500 에러 뜬 경우 등등)
        alert("실패");
    }
});

 

MemberIdOk.java

4.
package controller;

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

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import dao.MemberDAO;
import model.Member;


@WebServlet("/member/idok")
public class MemberIdOk extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    
    public MemberIdOk() {
        super();
        
    }

	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		String id = request.getParameter("id");
		
		//System.out.println("========="+id); console 창에서 확인
		
		MemberDAO dao = new MemberDAO();
		Member m = dao.oneMember(id);
		
		response.setContentType("text/html; charset=utf-8");
		PrintWriter out = response.getWriter();
		
		String str ="";
		
		if(m.getId() != null && !m.getId().equals("")) { // 존재하는 아이디라면
			str = "<font color=red>존재하는 아이디입니다.</font>";
		} else {
			str = "<font color=blue>사용 가능한 아이디입니다.</font>";
		}
		
		out.print(str);
	}

}

중복확인 누르면 아래에 멘트 뜨게 구현

 

<방법2>

 

join2.jsp

2. 
<span onclick="id_ok(join2.m_id.value)">[중복확인]</span>
<div id="id_result"></div>

3.
<script>
function id_ok(id) {

	//var id = $("#id").val(); 보다는 매개변수 넘기는게 나을 듯!

    $.ajax({
        url: "idok", //전송받을 페이지 경로(상대경로) servlet
        type: "post", //데이터 읽어오는 방식
        dataType: "text", //데이터 방식
        data: "id="+id,

        success:function(text){ //성공일 경우
            if(text == "1") {
           		$("#id_result").html("<font color=red>존재하는 아이디입니다.</font>");
            	$("#id_check").val("no"); // input
            } else if(text == "2") {
            	$("#id_result").html("<font color=blue>사용 가능한 아이디입니다.</font>");
            	$("#id_check").val("yes"); // input
            }
        },
        error:function(){ //실패일 경우(404, 500 에러 뜬 경우 등등)
        	alert("실패");
        }
    });
}
</script>


<form>
<input id="id_check" name="id_check">

 

MemberIdOk.java

package controller;

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

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import dao.MemberDAO;
import model.Member;


@WebServlet("/member/idok")
public class MemberIdOk extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    
    public MemberIdOk() {
        super();
        
    }

	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		String id = request.getParameter("id");
		
		//System.out.println("========="+id); //console 창에서 확인
		
		MemberDAO dao = new MemberDAO();
		Member m = dao.oneMember(id);
		
		response.setContentType("text/html; charset=utf-8");
		PrintWriter out = response.getWriter();
		
		String str ="";
		
		if(m.getId() != null && !m.getId().equals("")) { // 존재하는 아이디라면
			str = "1";
		} else {
			str = "2";
		}
		
		out.print(str);
	}

}

중복확인 누르면 input에 no, yes 뜨고 밑에 문구 뜨게 구현