[JSP] 🔗/AJAX(2) DB연동

DataBase연동하여 id 중복체크를 해보자

ch13-ajax 예제>

SQL TABLE을 생성한다.

백업용으로 .slq파일을 생성해서 코드를 넣어놓는다.

※ 생성할 때 반드시 commit 해줘야한다!

또는 코드로 작성했을 경우엔 마지막에 COMMIT;

confirmId.jsp>

json방식은 텍스트만 보내니까 코드들 지워주고 contentType="text/plain; 으로 바꿔주고

<%@ page import="java.sql.DriverManager" %>

<%@ page import="java.sql.Connection" %>

<%@ page import="java.sql.PreparedStatement" %>

<%@ page import="java.sql.SQLException" %>

<%@ page import="java.sql.ResultSet" %>

경로가 다를경우

<%@ include file="/ch11-jdbc/dbinfo.jspf " %>

이 때 jsp와 jspf의 contentType이 일치해야 오류안난다.

전송방식을 post방식으로 하기위해 전송된 데이터 인코딩 처리한다

request.setCharacterEncoding("utf-8");

아이디를 받아서 해당아이디가 있는지 확인하기위해 전송된 데이터 반환한다.

String id = request.getParameter("id");

Connection conn = null;

PreparedStatement pstmt = null;

ResultSet rs = null;

String sql = null;

try~ catch~ finally

	try{
		//JDBC수행 1단계 : 드라이버 로드
		Class.forName(driverName);
		//JDBC수행 2단계 : Connection 객체 생성
		conn=DriverManager.getConnection(jdbcUrl,dbId,dbPass);
		//SQL문 작성
		sql = "SELECT id FROM people WHERE id=?";
		//JDBC수행 3단계 : PreparedStatement 객체 생성
		pstmt = conn.prepareStatement(sql);
		//?에 데이터 바인딩
		pstmt.setString(1, id);
		//JDBC 수행 4단계 : SQL문을 테이블에 반영하고 결과행을 ResultSet에 담음
		rs = pstmt.executeQuery(); 
		
		if(rs.next()){ //행이있으니 id중복
%>
		{"result":"idDuplicated"}
<%
		}else{ //id 미중복
%>			
		{"result":"idNotFound"}
<%
		}
	}catch(Exception e){
%>
		{"result":"failure"} <!-- 클라이언트에 예외를 알림 -->
<%		
		e.printStackTrace();
	}finally{
		if(rs!=null)try{rs.close();}catch(SQLException e){}
		if(pstmt!=null)try{pstmt.close();}catch(SQLException e){}
		if(conn!=null)try{conn.close();}catch(SQLException e){}
	}
%>

JDBC 수행 4단계 : SQL문을 테이블에 반영하고 결과행을 ResultSet에 담음

* executeQuery() : select쿼리를 실행할 때 ResultSet을 결과값으로 리턴

아이디 중복 체크는 db에서 데이터를 뽑아낼 필요없이 중복여부만 확인하면 되기 때문에

(상황에 따라 뽑아서 클라이언트에게 보내는 경우도 있긴 하다)

영역을 분리시켜서 json표기법으로 문자열을 만든다.

if(rs.next()){

행이있으니 id중복

{"result":"idDuplicated"}

배열은 안만들고 객체형태로 만들어서 보낸다.

"result"로 식별하고

id가 미중복일 때"idDuplicated "라는 문자열을 보내본다.

{"result":"idNotFound"}

id가 미중복일 때 "idNotFound"라는 문자열을 보내본다.

작업할 때 예외가 발생도 하므로 catch 영역에 문구를 만들어서 클라이언트에 예외를 알릴 수 있도록 보내보자

}catch(Exception e){

{"result":"failure"}

e.printStackTrace();

▼ 검증 미리 해보기

전송방식을 post방식으로 하기위해 전송된 데이터 인코딩 처리하는

request.setCharacterEncoding("utf-8"); 을 명시했지만, get방식으로도 호출은 되긴한다.

그래서 클라이언트 쪽에서 호출하지 않아도 get방식으로 데이터를 넘겨서 검증을 할 수 있다.

아래와 같은 방식(get방식)으로 주소 뒤에 ?붙이고 id= 지정할 아이디를 넣어서 검증해 볼 수 있다.

※ 그런데 브라우저가 대문자를 입력할 때 소문자로 변환을 시켜서 db 정보와 일치하지 않아 체크를 못 하는

에러가 있지만 ajax로 처리할 때는 대문자도 잘 처리하므로 걱정하지 않아도 된다!

main.html>

제이쿼리 라이브러리를 이용해서 AJAX통신을 하기에 읽어오는 코드를 삽입

<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>

- UI작업

<body>에 <form>을 만들어 UI 작업 후 javascript작업을 한다.

<body>
<div>
	<form id="insert_form" method="post"> <!-- 아이디 중복체크만 할꺼라 액션을 명시 안했음 -->
		<fieldset>
			<legend>회원 가입</legend>
			<ul>
				<li>
					<label for="id">아이디</label>
					<input type="text" name="id" id="id">
					<input type="button" id="confirmId" value="아이디 중복 체크">
					<span id="id_signed"></span> <!-- 아이디가 중복됬는지 안됐는지 표시하려고 -->
				</li>
				<li>
					<input type="submit" value="전송">
				</li>
			</ul>
		</fieldset>
	</form>
</div>
</body>

<form id="insert_form" method="post"> 아이디 중복체크만 할꺼라 action을 명시안했음

<span id="id_signed"></span> 아이디가 중복됬는지 안됐는지 표시하기 위해 넣었음

- JS작업

<script type="text/javascript">
	$(function(){
		var count = 0; //0이면 아이디가 중복, (처음엔 미 실시니까 0)
		
		$('#confirmId').click(function () {
			if($('#id').val().trim()==''){
				alert('아이디를 입력하세요!');
				$('#id').focus();
				$('#id').val(''); //공백을 입력했을 때 지워주는 작업
				return; //submit할때만 return false, 함수만 빠져나갈때는 return
			}
			//IF문과 같은레벨에 입력해야한다.
			$.ajax({
				url:'confirmId.jsp', //요청URL
				type:'post', //클라이언트에서 전송되는 데이터의 타입
				data:{id:$('#id').val()}, //서버로 전송할 데이터
				dataType:'json',//서버로부터 전송되어지는 데이터타입 "T"
				cache:false, //캐시를 사용하지않겠다
				timeout:30000, //서버상황, 30초
				success:function(param){ //json형태로잘와서 정상적으로 성공했을 때 정보를 처리
					if(param.result=='idDuplicated'){ //아이디 중복
						count = 0; //다시검사하게끔 만들려고
						$('#id_signed').text('이미 등록된 아이디').css('color','red');
						$('#id').val('').focus();
					}else if(param.result == 'idNotFound'){ //아이디 미중복
						count = 1; //아이디가 미중복되면 1
						$('#id_signed').text('사용 가능한 아이디').css('color','black');
					}else{
						count = 0;
						alert('id중복 체크 시 오류 발생');
					}
				},
				error:function(){ //정상적이지못한 경우
					count=0; //검색을 안했다거나 미중복
					alert('네트워크 오류 발생');
				}
			});
		});//end of click
        
		//submit 정확하기 체크하기위해서 넣는것들
		$('#insert_form #id').keyup(function(){ //데이터를 바꾸면 다시 문구를 초기화하고 count를 0
			$('#id_signed').text('');
			count = 0;
		});
		
		$('#insert_form').submit(function () {
			if($('#id').val().trim()==''){ //아이디 입력안하고 전송할 경우
				alert('아이디를 입력하세요!');
				$('#id').focus();
				$('#id').val('');
				return false; //다시중복체크하게끔
			}
			
			if(count==0){
				alert('아이디 중복체크 필수');
				return false;
			}else{
				alert('아이디가 중복되지 않습니다!!!');
				return false;
			}
		});
	});
</script>

$(function(){

submit할때 다시 아이디를 중복검사를 하게끔 만들려고 count변수를 만든다

var count = 0;

0이면 id가 중복된 경우, id중복체크 미실시, (처음엔 미실시니까 0)

1이면 id가 미중복인 경우

$('#id').val(''); 공백을 입력했을 때 지워주는 작업
return;

서버프로그램과 통신하는 코드는 위의 IF문과 같은레벨에 입력해야한다.

$.ajax({

url:'confirmId.jsp', 요청URL
type:'post', 클라이언트에서 전송되는 데이터의 타입
data:{id:$('#id').val()}, 서버로 전송할 데이터
dataType:'json', 서버로부터 전송되어지는 데이터타입. data"T"ype"T"대문자임
cache:false, 옛날 데이터를 인식하지 못하게 캐시를 사용하지 않겠다
timeout:30000, 서버상황, 전송 상태가 안좋을때 실패한걸로 간주할 시간 (밀리세컨드단위)

success:function(param){ json형태로 잘 와서 정상적으로 성공했을 때 정보를 처리

ajax가 중괄호 안에 있는 내용을 수행 하고 데이터를 받아서 param 에 넣어준다.

if(param.result=='idDuplicated '){ 아이디 중복되면
count = 0; 다시 검사하게끔 만들고
$('#id_signed').text('이미 등록된 아이디').css('color','red'); '이미 등록된 아이디' 문구를 뜨게 한다.

$('#id').val('');
$('#id').focus();

이 두 코드를

$('#id').val('').focus(); 연이어서 명시가 가능하다.

$('#id').val('').focus();
}else if(param.result == 'idNotFound'){ 아이디 미중복

count = 1;

error:function(){ //json형식에 맞지않게 정상적이지못한 경우

count=0; //검색을 안했다거나 미중복

alert('네트워크 오류 발생'); }

ch14-ajax 예제>

<%@ page language="java" contentType="text/plain; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>

<%@page import="java.sql.Connection"%>

<%@page import="java.sql.PreparedStatement"%>

~~<%@page import="java.sql.ResultSet"%>~~

<%@ include file="dbinfo.jspf" %> JDBC수행 1단계 : 드라이버 로드 시 사용한다.

<%@ page import="java.sql.DriverManager" %> JDBC수행 2단계 : connection객체 생성 시 사용한다.

~~<%@ page import= "java.sql.Date" %> db에 있는 객체를 연월일 형태로(Date)표기 시 사용한다.~~

<%@ page import="java.sql.SQLException" %> finally 자원정리 시 사용한다.

ch15-ajax 예제>

mvcPage예제>

파일업로드와 Ajax옵션

FormData [JS] 🔮FormData

FormData는 <form>처럼 key/value가 저장되어 데이터를 처리할 수 있다.

ForData에 파일 정보를 append()를 통해 key/value 형식으로 넣는다.

dataType

보내는 데이터 타입이 아니라 서버가 응답할 때 보내줄 데이터 타입.

success function에 전달될 argument의 형태를 지정하는 데 사용된다.

contentType

데이터객체를 문자열로 바꿀지 지정 true시 일반문자

default 값은 "application/x-www-form-urlencoded; charset=UTF-8", "multipart/form-data"로 전송되도록 false 설정.

명시적으로 "multipart/form-data"으로 설정해주면 boundary string이 안 들어가 제대로 동작하지 않는다.

boundary string : 브라우저에서 넣어주는 전송되는 데이터 영역을 구분해주는 구분자

processData

기본값은 true다.

ajax 통신을 통해 데이터를 전송할때, 기본적으로 key와 value값을 Query String으로 변환해서 보낸다.

일반적으로 서버에 전달되는 데이터는 query string 이라는 형태로 전달된다. (아래 빨간 부분)

ex) http://example.com/over/there?title=Main_page&action=raw

data 파라미터로 전달된 데이터를 jQuery 내부적으로 query string 으로 만드는데,

(데이터 값에 따라 (key=value&key=value) 또는 (key:value, key:value) 이런 식으로 보내게되는데,)

파일 전송의 경우 이를 하지 않아야 하고 이를 설정하는 것이 processData: false 이다.

∴ processData는 파일 전송 시에 사용한다고 한다.

enctype [HTML] 🔮폼(form) 태그 (4)

출처: https://repacat.tistory.com/38 [레파캣]

클라이언트에서 네트워크 오류가 나면

1st 서버 프로그램을 본다.

2nd 콘솔에서 에러를 본다.

3rd 없으면 {키:밸류} 값이 오류 없는지 확인한다.

4th 클라이언트에서 오타확인한다.

5th 트라이-캐치 블럭쪽 오타 확인.

'WEB > ✿JSP' 카테고리의 다른 글

[JSP] 🔗JDBC와 커넥션 풀 (0)	2022.01.15
[JSP] 🔗모델1 구조(1) (0)	2022.01.14
[JSP] 🔗AJAX(1) (0)	2022.01.13
[JSP] 🔗JDBC실습 - 상품게시판 (0)	2022.01.12
[JSP] 🔗/db 연동 (0)	2022.01.11