GSON 사용 X

화면 단

form

			<tr>
				<th>아이디</th>
				<td><input type="text" name="userId" id="userId"
					placeholder="아이디를 입력하세요." />
					<button class="btn idCheck">아이디 중복확인</button>
					<p class="isAvailable"></p></td>
			</tr>

ajax

$(".idCheck").on("click", function() {
		const sendUserId = $("#userId").val();
		if (sendUserId !== "") {
			$.ajax({
				url : "./idCheck",
				data : {
					userId : sendUserId
				},
				success : function(response) {
					console.log(response);
					if (parseInt(response.trim()) === 0) {
						//$("#userID").attr("readonly", true);
						$(".isAvailable").text("쓸 수 있는 아이디 입니다.");
						$(".isAvailable").css("color", "green");
					} else {
						$(".isAvailable").text("쓸 수 없는 아이디 입니다.");
						$(".isAvailable").css("color", "red");
						$("#userID").val("");
						$("#userID").focus();
					}
				},
				fail : function(error) {
					console.log(error);
				}
			});
		} else if (sendUserId == "") {
			$(".isAvailable").text("아이디를 입력해주세요.");
			$(".isAvailable").css("color", "pink");
			$("#userID").focus();
		}
		return false;
	})

Servlet

dao 함수

public int idCheck(String userId) {
		
		int result = 0;
	
		// userId가 null 인 경우는 에이젝스에서 처리하고 있기 때문에 
		// 여기서는 따로 -1로 반환하거나 하지 않음
		
		String sql = "SELECT COUNT(*) AS COUNT FROM MEMBER02 WHERE USERID = ?";
		
		try {
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, userId);
			
			rs = pstmt.executeQuery();
			if (rs.next()) {
				result = rs.getInt("COUNT");
				//System.out.println("dao idCheck  : " + result);
				return result;
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			close();
		}
		return result;
	}

Servlet

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

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		MemberDao memberDao = new MemberDao();
		String userId = request.getParameter("userId");
		int result = memberDao.idCheck(userId);
		request.setAttribute("result", result);
		System.out.println(userId + " / " + result);
		
		RequestDispatcher dispatcher = request.getRequestDispatcher("/WEB-INF/member/idCheck.jsp");
		dispatcher.forward(request, response);
		
		
		// pageContext, requset,session,application
	}
}

idCheck.jsp

• 이 jsp의 역할은 view로서의 view가 아님.
• ajax의 요청에 대한 response 값을 띄우는 역할.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	int result = (int)request.getAttribute("result");
%>
<%=result %>

다시 ajax 살펴보기

$(".idCheck").on("click", function() {
		const sendUserId = $("#userId").val();
		if (sendUserId !== "") {
			$.ajax({
				url : "./idCheck",
				data : {
					userId : sendUserId
				},
				success : function(response) {
					console.log(response);
					if (parseInt(response.trim()) === 0) {
						//$("#userID").attr("readonly", true);
						$(".isAvailable").text("쓸 수 있는 아이디 입니다.");
						$(".isAvailable").css("color", "green");
					} else {
						$(".isAvailable").text("쓸 수 없는 아이디 입니다.");
						$(".isAvailable").css("color", "red");
						$("#userID").val("");
						$("#userID").focus();
					}
				},
				fail : function(error) {
					console.log(error);
				}
			});
		} else if (sendUserId == "") {
			$(".isAvailable").text("아이디를 입력해주세요.");
			$(".isAvailable").css("color", "pink");
			$("#userID").focus();
		}
		return false;
	})

• 요청에 대해서 success가 이루어지면,
• 즉, 에이젝스에 명시된 주소에 대한 서블릿으로 데이터가 이동하여 함수 처리가 잘 되어서 response까지 잘 다시 성공적으로 돌아오면
• 제이쿼리는 비어있던 p태그에 아이디가 available한지에 대한 메시지를 삽입한다.
• response는 흐름을 살펴보면 알겠지만, 함수가 데이터를 execute
  Update 했을 때에 대한 리턴값이다.
• 아이디가 중복된 것이 없다면 0이 반환된다.

화면

Gson 사용 O

• 우선 maven repository에서 gson.jar를 다운받아 프로젝트 외부라이브러리에 설정시킨다.

AJAX

$(".idCheck").on("click", function() {
		const sendUserId = $("#userId").val();
		if (sendUserId !== "") {
			$.ajax({
				url : "./idCheck",
				data : {
					userId : sendUserId
				},
				success : function(response) {
					console.log(response);
					// if(parseInt(response.trim()) === 0)
					if (response.count == 0) {
						//$("#userID").attr("readonly", true);
						$(".isAvailable").text("쓸 수 있는 아이디 입니다.");
						$(".isAvailable").css("color", "green");
					} else {
						$(".isAvailable").text("쓸 수 없는 아이디 입니다.");
						$(".isAvailable").css("color", "red");
						$("#userID").val("");
						$("#userID").focus();
					}
				},
				fail : function(error) {
					console.log(error);
				}
			});
		} else if (sendUserId == "") {
			$(".isAvailable").text("아이디를 입력해주세요.");
			$(".isAvailable").css("color", "pink");
			$("#userID").focus();
		}
		return false;
	})

Servlet

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.RequestDispatcher;
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 com.google.gson.Gson;
import com.jjang051.model.MemberDao;

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

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		MemberDao memberDao = new MemberDao();
		String userId = request.getParameter("userId");
		int result = memberDao.idCheck(userId);
		
		System.out.println(userId + " / " + result);
		
		Map<String, Integer> resultMap = new HashMap<>(); 
		resultMap.put("count", result);
		Gson gson = new Gson();
		String resultJson = (String)gson.toJson(resultMap);
		
		request.setAttribute("result", resultJson);
		RequestDispatcher dispatcher = request.getRequestDispatcher("/WEB-INF/member/idCheck.jsp");
		dispatcher.forward(request, response);
		
		
		// pageContext, requset,session,application
	}
}

idCheck.jsp

<%@page import="com.google.gson.Gson"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//String result = (String)request.getAttribute("result");
	
%>
<% //out.println(result) %>

<!-- jstl 활용하여 화면에 출력 - response -->
${requestScope.result}  

다시 ajax

• 아까는 int result를 받았는데 이번에는 json의 key, value에서 value에 바로 접근한다 ex. response.count

$(".idCheck").on("click", function() {
		const sendUserId = $("#userId").val();
		if (sendUserId !== "") {
			$.ajax({
				url : "./idCheck",
				data : {
					userId : sendUserId
				},
				success : function(response) {
					console.log(response);
					// if(parseInt(response.trim()) === 0)
					if (response.count == 0) {
						//$("#userID").attr("readonly", true);
						$(".isAvailable").text("쓸 수 있는 아이디 입니다.");
						$(".isAvailable").css("color", "green");
					} else {
						$(".isAvailable").text("쓸 수 없는 아이디 입니다.");
						$(".isAvailable").css("color", "red");
						$("#userID").val("");
						$("#userID").focus();
					}
				},
				fail : function(error) {
					console.log(error);
				}
			});
		} else if (sendUserId == "") {
			$(".isAvailable").text("아이디를 입력해주세요.");
			$(".isAvailable").css("color", "pink");
			$("#userID").focus();
		}
		return false;
	})

console.log