열심히 끝까지
디바이스 융합 자바(Java) day53 - AJAX 이용한 아이디 중복 체크 본문
디바이스 융합 자바(Java) day53 - AJAX 이용한 아이디 중복 체크
노유림 2022. 8. 25. 17:07AJAX
아이디 중복검사
인증
좋아요
추천/비추천
찜
.
.
.
=> 비동기처리
: 서버의 별도 방문 없이 바로 바뀌는 것
>> 이미 데이터의 로딩 완료
: 서버 방문을 안하기 때문에 페이지의 내용이 유지
※ AJAX는 Spring에서는 @ 설정으로 진행되는 것이 일반적
> JSP에서 사용하는 방식을 소개할 예정
>> 많이 쓰이는 방식은 아님!
★name 속성 vs id, class 속성
- name 속성
파라미터명
request.getParameter("name에 작성된 값");
${param.name에 작성된 값}
- id, class 속성
CSS, JS에서 사용하기 위해 붙인 이름
#id명 .class명
웹 크롤링 등에서도 이용됨
id : 유일한 요소에서 사용
class : 다수의 요소에 공통적으로 설정이 적용될 때
- tip!
: getParameter안에 꺾세괄호를 넣음
=> 오류가 나지 않고 null값을 받아오기 때문에 꺾세가 []붙어나옴
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<div id="box">
<input type="text" name="mid" id="mid">
<button class="btn" onclick="check();">중복검사</button>
<div id="result"></div>
</div>
<script type="text/javascript">
function check(){
var mid = $("#mid").val(); // html에서 불러온 값 id = # | class = .
$.ajax({
type: 'GET', // get or post
url : '${pageContext.request.contextPath}/check.do?mid='+mid, // controller 작업할 차례 => servlet 사용
data : {mid:mid},// {이름:값} // json 사용
success : function(result){ // check에서 가져온 값 result 작성
// result는 String 파일
// js - 1 : 모든 데이터가 객체
// js - 2 : 동적타이핑(즉각적으로 자동 형변환)
console.log("로그2 ["+result+"]");
if(result==1){
$("#result").text("사용가능한 아이디입니다!")// 사용가능
$("#result").css("color","blue");
}
else{
$("#result").text("이미 사용중인 아이디입니다...")// 사용중이라 사용 불가
$("#result").css("color","red");
}
},
error : function(request, status, error){ // 순서
console.log("상태코드 : " + request.status);
console.log("메세지 : " + request.responseText);
console.log("에러 설명 : " + error); // 이 것은 디버깅 할 때 필요, 잘 안쓰이기도 함
}
});
}
</script>
</body>
</html>package test;
import java.io.IOException;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class Check
*/
@WebServlet("/check.do") // FrontController에서 했던 것 /도 판단 부분이라 들어감
public class Check extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Check() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
// GET으로 만들어서 여기에 만들어도 되고
// POST로 보내서 POST에서 작업해도 괜찮음
// doPost(request, response);
// response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("로그1 ["+ request.getParameter("mid") +"]");
// tip! getParameter안에 꺾세가로를 넣음 => 오류가 나지 않고 null값을 받아오기 때문에 꺾세가 []붙어나옴
TestDAO dao = new TestDAO();
TestVO vo = new TestVO();
vo.setMid(request.getParameter("mid")); // 문자열 값
// setMid를 받으려면 파라미터로부터 받아야 함
int result = dao.check(vo);
ArrayList<Integer> datas = new ArrayList<Integer>();
datas.add(1);
datas.add(23);
datas.add(4);
// 요청했던 곳으로 result값을 보낼 예정 = keypoint
// 그 전에 utf-8로 인코딩 하라고 지시
response.setContentType("application/x-json; charset=UTF-8");
//response.getWriter().write(result+"");
response.getWriter().write(datas.toString());
// result뒤에 ""넣음으로서 String으로 값 보냄
// ResponseBody는 Spring에서 사용
// String으로 데이터를 변환 작업
// -> 직접 String으로 데이터를 변환
}
}- 모듈화의 이유로 ajax의 서블릿을 따로 만듦
- 어떤 요청을 하는가, 만약 NewFile.jsp를 쓰면 그 페이지가 동작
-> mid(V에서 입력한 값)라는 변수 만들어서 사용자가 입력한 값을 확보한 상태
DB한테 물어볼 예정 "mid라는 값이 DB에 이미 있어?" => DAO를 거침
Controller가 작업할 예정 "서블릿"이 필요!
'check.do'라고 써도 괜찮다. 하지만! 각자 쓰는 서비스의 어느 페이지라고 지정을 하게 되어있음!
실제 서버에 관한 정보를 넘기는 방법 ${pageContext.request.contextPath} 작성
>> 데이터를 보내주는 쪽에서 객체를 여러개 보낼 수 있다
>> 받는 쪽에서
result는 String 파일
js - 1 : 모든 데이터가 객체
js - 2 : 동적타이핑(즉각적으로 자동 형변환)
다음과 같은
정리
1. 데이터를 N개, 객체 등을 보낼 수 있다.
1. JS가 동적타이핑을 지원하기 때문에,
2. list 타입으로 데이터를 받아서
'디바이스 융합 자바(Java)기반 풀스택 개발자 양성과정(수업내용)' 카테고리의 다른 글
| 디바이스 융합 자바(Java) day55 - 이미지 미리보기 (0) | 2022.08.29 |
|---|---|
| 디바이스 융합 자바(Java) day54 - 이미지 업로드 (0) | 2022.08.26 |
| 디바이스 융합 자바(Java) day52 - 팀프로젝트 작업 및 frontController 질문 및 답변 (0) | 2022.08.24 |
| 디바이스 융합 자바(Java) day51 - FrontController 패턴,Request Dispatcher (0) | 2022.08.23 |
| 디바이스 융합 자바(Java) day50 - 회원가입 새 창 띄우기,더보기 갯수 한 곳에서 지정,커스텀태그 (0) | 2022.08.22 |
