초급의 끄적거림

[Spring] AJAX 2 / 아이디 중복확인 / 쿠키 생성 본문

Framework/Spring

[Spring] AJAX 2 / 아이디 중복확인 / 쿠키 생성

codingD 2019. 10. 17. 17:30

1. AJAX 테스트

01_ajaxTest.jsp 

 1) ajax() 사용 + .empty()

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01_ajaxTest.jsp</title>
</head>
<body>
<button>* 서버에서 응답받기 *</button>  <!-- '댓글 더보기' 버튼과 동일한 역할 -->
 <div id="panel"></div>
 
 <script src="../js/jquery.js"></script> <!-- ajax 함수를 쓰기 위해 import -->
 <script>
 	$("button").click(function (){
    
    //1) .ajax() 사용
    $.ajax({
    		url 		: "test.do", 	//요청명령어  (명령어를 풀로 다 쓴 경우 '/form1/member/test.do' )
 		method		:"get", 		//get|post 방식도 있음, 아무것도 적히지 않으면 get방식 
 		dataType	:"text",		//문자열 
 		error		: function(xhr, status, error){	//callback함수, 원인 (xhr, status), ★ 에러메세지 (error)★ 제대로 답변을 받지 못한 경우 (error가 났을 때는 해줄 수 있는 것이 없음)
 			alert("에러 !! "+error);
 		}, //error end	
 		success		: function(result, status, xhr){ //★ callback함수, 성공한 경우 메세지 (result), 제대로 답변을 받은 경우
 		
       		$("#panel").empty();		//버튼 한 번 누를 때마다 삭제 후, 새로 추가
        	$("#panel").append(result);	//댓글 형태로 계속 붙어서 나오는 것
    });//ajax() end
    
}//responseProc() end

여러 번 버튼을 눌러도 .empty로 인해 지워졌다가 한 개의 메세지만 적힘

 

 2) ajaxSetup() 사용

$.get("요청명령어", callback 함수)
//2) ajaxSetup() 사용
//AJAX 객체의 기본값 지정
$.ajaxSetup({dataType : "text"});

//$.get("요청명령어", callback 함수)
//$.get("/form1/member/test.do", function(){}); //get() end - 현재 서버의 url에 /form1/member/ 경로가 살아 있기 때문에 굳이 안 적어도 됨
$.get("test.do", function(result){ //test.do를 get방식으로 요청
	$("#panel").append(result);
}); //get() end

 

 3) callback 함수 호출

callback 함수를 따로 만들었다가 호출, 뒤에 { 대괄호 } 안씀
//3) callback 함수 호출 (callback 함수를 따로 만들었다가 호출)
$.get("test.do", responseProc); //get() end


//callback 함수
function responseProc(result){
	$("#panel").append(result);
}//responseProc() end

 

 

2. keyup()을 활용한 아이디 중복확인

02_idCheck.jsp

  - keyup() 이벤트를 alert를 넣어 확인 했을 경우, 한 글자가 새겨질 때마다 알림창이 뜸

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02_idCheck.jsp</title>
</head>
<body>
	<h3>[회원가입]</h3>
	<form name="memfrm" id="memfrm">
    <table>
    	<tr>
        	<th></th>
            <td><input type="text" name="uid" id="uid"></td>
            <td><div id="demo" style="display: none;></div></td>
        </tr>
    </table>
    </form>
<script src="../js/jquery.js"></script>  <!-- jquery 오픈 소스 import -->
<script>
	$("#uid").keyup(function(){
    	$.post("idcheck.do",  			//요청명령어
        	   "uid="+$("#uid").val(),  //서버 요청 전달값, id가 uid인 것의 val(ue)를 가져오라. 더 넣으려면 & 사용하여 추가
               responseProc				//콜백 함수
               );   //post() end, post방식
    });  //id → #, keyup 이라는 이벤트
    
    //post 방식의 callback 함수를 따로 생성
    $("#demo").empty();
    $("#demo").html(result);
    $("#demo").show();
    }//responseProc() end
</script>
</body>
</html>

 

3. DB연결

<준비>
- myweb에 가서 패키지 DBPKG 복사 → basicAjax/src/main/java/DBPKG.DBOpen.java 
- kr.co.form1.test1.MemberDAO.java 생성
- MemberDAO.java에 myweb에서 만들었던 '아이디 중복' 메소드 복사
package DBPKG;

import java.sql.Connection;
import java.sql.DriverManager;

public class DBOpen {
	public static Connection getConnection() throws Exception {
		Class.forName("oracle.jdbc.OracleDriver");
		Connection con=DriverManager.getConnection("jdbc:oracle:thin:@//localhost:1521/xe", "java0514","1234");  //시험에서는 아이디를 'system'을 넣어주지만 지금은 개인 아이디가 있으니 개인아이디
		return con;
	}//getConnection() end
	
}//class end

 

 

AjaxTestCont.java

 3-1) 아이디 중복확인

   - kr.co.form1.test1.AjaxTestCont.java

@RequestMapping("/member/idcheck.do")
public void idCheck(HttpServletRequest req, HttpServletResponse resp){
	try{
    	String uid=req.getParameter("uid").trim();
        String message="";  //응답메세지
        
        //System.out.println(uid); → uid를 넘겨받지 못해서 에러가 발생할 수 있기 때문에 이를 점검하기 위해서 적음//System.out.println(uid); → uid를 넘겨받지 못해서 에러가 발생할 수 있기 때문에 이를 점검하기 위해서 적음
        
        if(uid.length()<5 || uid.length()>=11){
        	message="<span style='color: red; font-weight: bold'>아이디는 5~10글자 이내로 입력 해주세요.</span>";   
        }else{
        	MemberDAO dao=new MemberDAO();
            int cnt = dao.duplecateID(uid);  //아이디 중복확인
            if(cnt==0){
            	message="<span style='color: blue; font-weight: bold'>사용 가능한 아이디 입니다.</span>";
            }else{
            	//cnt==1 이면 입력된 아이디와 일치하는 아이디가 존재한다는 의미이기 때문에 중복된 아이디로 인식해야 함
                message="<span style='color: green; font-weight: bold'>중복된 아이디 입니다.</span>";
            }//if end
        }//if end
        
        resp.setContentType("text/plain; charset=UTF-8");
        PrintWriter out = resp.getWriter();
        out.println(message);
        out.flush();
        out.close();
        
    }catch(Exception e){
    	System.out.println("응답 실패 : " + e);
    }//try end
}//idCheck() end

 

MemberDAO.java

kr.co.form1.test01.MemberDAO.java

package kr.co.form1.test01;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import DBPKG.DBOpen;

public class MemberDAO {
	public int duplecateID(String id){
    	int cnt=0;
        try{
        	Connection con=DBOpen.getConnection();
            StringBuilder sql=new StringBuilder();
            
            //아이디 중복확인
            sql.append(" SELECT count(id) as cnt ");
            sql.append(" FROM member ");
            sql.append(" WHERE id=? ");
            
            PreparedStatement pstmt=con.prepareStatement(sql.toString());
            pstmt.setString(1, id);
            
            ResultSet rs=pstmt.executeQuery();
            if(rs.next()){
            	cnt=rs.getInt("cnt");
            }//if end
        }catch(Exception e){
        	System.out.println("아이디 중복 확인 실패 : "+e);
        }//try end
        return cnt;
    }//duplecateID() end

}//class end

 

 

 3-2) 아이디 중복확인을 거치지 않은 경우, 아이디 사용이 불가능함

 

4. text와 json 방식을 활용한 아이디 중복확인

03_idCheck_cookie.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03_idCheck_cookie.jsp</title>
</head>
<body>
  <h3>[회원가입]</h3>
  <form name="memfrm" id="memfrm" onsubmit="return send()">
  <table>
  <tr>
    <th>아이디</th>
    <td>
      <input type="text" name="uid" id="uid">
      <button type="button" id="checkId">중복확인</button>
    </td>
    <td>
      <span id="panel_id"></span> <!-- ID 중복 관련 메세지 -->
    </td>
  </tr>  
  <tr>
    <th>비밀번호</th>
    <td><input type="password" name="upw" id="upw"></td>
    <td>&nbsp;</td>
  </tr>  
  <tr>
    <td colspan="3"><input type="submit" value="가입"></td>
  </tr>  
  </table>    
  </form>
</body>
</html>

 

AjaxTestCont.java

 4-1) text 방식

 - 중복아이디에 클릭 이벤트 지정

//idCheck_cookie.jsp
@RequestMapping("/member/idcheck2.do")
public void idCheck2(HttpServletRequest req, HttpServletResponse resp){
	try{
    	String uid=req.getParameter("uid").trim();
        
		MemberDAO dao=new MemberDAO();
        int cnt=dao.dubplecateID(uid); //아이디 중복확인
        
        resp.setContentType("text/plain; charset=UTF-8");  
        PrintWriter out = resp.getWriter();
        out.println(cnt);
        out.flush();
        out.close();
	
    }catch(Exception e){
    	System.out.println("응답 실패 : " + e);
    }//try end
}//idCheck2() end

 

 - 제대로 전달받고 있는지를 확인하기 위해 alert를 이용하여 0과 1로서 확인하기 + alert 삭제 후 메세지 출력

 

 4-2) json 방식

  - json은 라이브러리가 필요함 → basicSpring의 pom.xml에서 'json라이브러리' 복사 붙여넣기

<!-- JSON 라이브러리 -->
<dependency>
	<groupId>com.googlecode.json-simple</groupId>
	<artifactId>json-simple</artifactId>
	<version>1.1.1</version>
</dependency>
//idCheck_cookie.jsp
//pom.xml에 JSON 의존성 추가

@RequestMapping("/member/idcheck2.do")
public void idCheck2(HttpServletRequest req, HttpServletResponse resp) {
	try {
		String uid=req.getParameter("uid").trim();
			
		MemberDAO dao=new MemberDAO();
		int cnt = dao.duplecateID(uid); //아이디 중복확인
        
        JSONObject obj=new JSONObject();
        obj.put("count", cnt); //(key, value) count 에는 cnt 값이 담김 → front 단에 count를 가져감
        resp.setContentType("text/plain; charset=UTF-8"); 
        PrintWriter out=resp.getWriter();
        out.println(obj.toString());
        out.flush();
        out.close();
        }catch(Exception e){
        	System.out.println("응답 실패 : "+ e)
        }//try end
}//idCheck2() end

 

 - 쿠키변수 생성

 

 

 

저작자표시 비영리 변경금지

'Framework > Spring' 카테고리의 다른 글

[Spring] 파일 다운로드/업로드 (수정, 삭제)  (0) 2019.10.20
[Spring] 파일 다운로드/업로드 게시판 (등록, 목록, 상세보기)  (0) 2019.10.18
[Spring] 파일 업로드 게시판  (0) 2019.10.17
[Spring] maven / AJAX  (0) 2019.10.16
[Spring] Spring 기본설정 / 기본 사용 방법  (0) 2019.10.15
'Framework/Spring' Related Articles more
Comments