64Day - welcome_one & welcome_two / books_one & books_two / songs_one & songs_two & JdbcDAO/ SuggestDAO & SuggestDTO & suggest_one & suggest_two/AjaxMemberDAO & AjaxMemberDTO & $$ member_id_check & member_join_action & member_join_input & member_join

5월 ~ 7월) 웹/ajax

64Day - welcome_one & welcome_two / books_one & books_two / songs_one & songs_two & JdbcDAO/ SuggestDAO & SuggestDTO & suggest_one & suggest_two/AjaxMemberDAO & AjaxMemberDTO & $$ member_id_check & member_join_action & member_join_input & member_join_re..

첼로그 2023. 7. 5. 19:33

1. welcome_one & welcome_two

2 . books_one & books_two

3. songs_one & songs_two & JdbcDAO

4. SuggestDAO & SuggestDTO & suggest_one & suggest_two

5. AjaxMemberDAO & AjaxMemberDTO & $$ member_id_check & member_join_action & member_join_input & member_join_result

- 검색창

- 아이디중복검사

webapp > jquery )
welcome_one .jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- [welcome_two.jsp] 문서를 AJAX 기능으로 요청하여 실행결과를 HTML 태그로 응답받아 태그를  
변경하여 클라이언트에게 전달하는 JSP 문서 - jQuery 라이브러리의 AJAX 관련 메소드 사용 --%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<h1>jQuery AJAX</h1>
	<hr>
	<label for="name">이름 : </label>
	<input type="text" id="name">
	<button type="button" id="btn">입력완료</button>
	<hr>
	<div id="message"></div>
	
	<script type="text/javascript">
	$("#btn").click(function() {
		var name=$("#name").val();
		
		if(name=="") {
			$("#message").text("이름을 입력해 주세요.");
			return;
		}
		
		$("#name").val("");
		
		//$.ajax(settings) : AJAX 기능을 사용하여 웹프로그램을 요청하여 응답받아 처리하기 위한 메소드
		// => 매개변수에는 AJAX 기능을 구현하기 위한 정보를 Object 객체로 표현하여 전달
		// => 매개변수에 전달되는 Object 객체의 요소의 이름은 정해져 있으며 값 또는 함수로 요소값 표현
		// => $.get() 또는 $.post() 메소드를 사용하여 AJAX 기능 구현 가능
		/*
		$.ajax({
			type: "post",//요청방식 설정 - 생략된 경우 GET 방식으로 요청
			url: "welcome_two.jsp",//요청 웹프로그램의 URL 주소 설정
			data: "name="+name,//요청 웹프로그램에게 전달할 값 설정
			dataType: "html",//응답결과에 대한 문서형식 - 요소값 : text, html, script, xml, json 등
			//정상적인 응답결과를 제공받아 처리할 명령을 작성하는 함수 설정 - 상태코드 : 200
			// => 속성값으로 설정된 함수의 매개변수에는 자동으로 응답결과를 제공받아 저장
			success: function(result) {
				$("#message").html(result);
			}, 
			//비정상적인 응답결과를 제공받아 처리할 명령을 작성하는 함수 설정 - 상태코드 : 4XX or 5XX
			// => 속성값으로 설정된 함수의 매개변수에는 자동으로 XMLHttpRequest 객체를 제공받아 저장
			error: function(xhr) {
				alert("에러코드 = "+xhr.status);
			}
		});
		*/
		
		//$.post(url[, data][, success][, dataType]) : AJAX 기능을 사용하여 웹프로그램을 
		//POST 방식으로 요청하여 응답받아 처리하기 위한 메소드
		$.post("welcome_two.jsp", "name="+name, function(result) {
			$("#message").html(result);
		}, "html");
	});
	</script>
</body>
</html>

welcome_two .jsp

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

	String name=request.getParameter("name");
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
</head>
<body>
	<%=name %>님, 환영합니다.
</body>
</html>

검색창 - 연습1

webapp > jquery )

books_one .jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- [books_two.jsp] 문서를 AJAX 기능으로 요청하여 실행결과를 XML 데이타로 응답받아 태그를  
변경하여 클라이언트에게 전달하는 JSP 문서 --%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<h1>jQuery AJAX</h1>
	<hr>
	<div id="bookList"></div>
	
	<script type="text/javascript">
	$.ajax({
		type: "get",
		url: "books_two.jsp",
		//요청 웹프로그램에 응답결과의 문서형태과 dataType 속성값이 맞지 않을 경우 200 에러코드 발생
		dataType: "xml",
		success: function(xmlDoc) {
			//alert(xmlDoc);//[object XMLDocument]
			
			var count=$(xmlDoc).find("book").length;
			if(count==0) {
				$("#bookList").html("<p>검색된 교재가 하나도 없습니다.");
				return;
			}
			
			var html="<p>검색된 교재가 "+count+"권 있습니다.</p>";
			html+="<ol>";
			$(xmlDoc).find("book").each(function() {
				var title=$(this).find("title").text();
				var author=$(this).find("author").text();
				html+="<li><b>"+title+"</b>["+author+"]</li>";
			});
			html+="</ol>";
			
			$("#bookList").html(html);
		},
		error: function(xhr) {
			alert("에러코드 = "+xhr.status);
		}
	});
	</script>
</body>
</html>

books_two .jsp

<?xml version="1.0" encoding="utf-8"?>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>
<books>
	<book>
		<title>Java의 정석</title>
		<author>남궁성</author>
	</book>
	<book>
		<title>JSP 웹프로그래밍</title>
		<author>오정임</author>
	</book>
	<book>
		<title>스프링 입문</title>
		<author>유이치</author>
	</book>
</books>

검색창 연습2

webapp > jquery )

songs_one .jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- [songs_two.jsp] 문서를 AJAX 기능으로 요청하여 실행결과를 JSON 데이타로 응답받아 태그를  
변경하여 클라이언트에게 전달하는 JSP 문서 --%>      
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
	<h1>jQuery AJAX</h1>
	<hr>
	<h2>음원챠트(<span id="now"></span> 현재 기준)</h2>
	<div id="songList"></div>
	
	<script type="text/javascript">
	$.ajax({
		type: "get",
		url: "songs_two.jsp",
		dataType: "json",
		success: function(obj) {
			//alert(obj);//[object Object]
			
			//$("#now").html(obj.now);
			$("#now").html(obj["now"]);
			
			var html="<ol>";
			$(obj.songs).each(function() {
				html+="<li><b>"+this.title+"</b>["+this.singer+"]</li>";
			});
			html+="</ol>";
			
			$("#songList").html(html);
		},
		error: function(xhr) {
			alert("에러코드 = "+xhr.status);
		}
	});
	</script>
</body>
</html>

songs_two .jsp

<%@page import="java.util.Date"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 현재 날짜와 시간 및 음원챠트를 JSON 형식의 데이타로 제공하는 JSP 문서 --%>    
<%
	String now=new SimpleDateFormat("yyyy년 MM월 dd일 HH시").format(new Date());
%> 
{
	"now":"<%=now %>",
	"songs":[
		{"title":"퀸카(Queencard)", "singer":"(여자)아이들"},{"title":"I AM", "singer":"IVE(아이브)"}
		,{"title":"Spicy", "singer":"aespa"},{"title":"이브, 프시케 그리고 푸른 수염의 아내", "singer":"LE SSERAFIM(르세라핌)"}
		,{"title":"UNFORGIVEN(feat. Nile Rodgers)", "singer":"LE SSERAFIM(르세라핌)"},{"title":"Kitsch", "singer":"IVE(아이브)"}
		,{"title":"헤어지자 말해요", "singer":"박재정"},{"title":"사랑은 늘 도망가", "singer":"임영웅"}
		,{"title":"모래 알갱이", "singer":"임영웅"},{"title":"우리들의 블루스", "singer":"임영웅"}
	]
}

main >webapp> META-INF)
+ context.xml

context.xml

0.00MB

webapp >WEB-INF > lib)
+ ojdbc11.jar

ojdbc11.jar

6.65MB

검색창 만들기

src / main/ java > xyz.itwill.dto)
SuggestDTO .java (sql 만들기)

package xyz.itwill.dto;

/*
create table suggest(word varchar2(50) primary key, url varchar2(100));

insert into suggest values('JAVA','https://www.oracle.com');
insert into suggest values('Spring','https://spring.io');
insert into suggest values('Servlet','https://www.servlets.com');
insert into suggest values('eclise','https://www.eclipse.org');
insert into suggest values('jQuery','https://www.jquery.com');
insert into suggest values('apache','https://www.apache.org');
insert into suggest values('tomcat','https://tomcat.apache.org');
insert into suggest values('다음','https://www.daum.net');
insert into suggest values('네이버','https://www.naver.com');
insert into suggest values('구글','https://www.google.com');
insert into suggest values('아이티윌','http://www.itwill.xyz');

commit;
*/

public class SuggestDTO {
	private String word;
	private String url;
	
	public SuggestDTO() {
		// TODO Auto-generated constructor stub
	}

	public String getWord() {
		return word;
	}

	public void setWord(String word) {
		this.word = word;
	}

	public String getUrl() {
		return url;
	}

	public void setUrl(String url) {
		this.url = url;
	}
}

(sql 만들기)

// sql 만들기
create table suggest(word varchar2(50) primary key, url varchar2(100));

insert into suggest values('JAVA','https://www.oracle.com');
insert into suggest values('Spring','https://spring.io');
insert into suggest values('Servlet','https://www.servlets.com');
insert into suggest values('eclise','https://www.eclipse.org');
insert into suggest values('jQuery','https://www.jquery.com');
insert into suggest values('apache','https://www.apache.org');
insert into suggest values('tomcat','https://tomcat.apache.org');
insert into suggest values('다음','https://www.daum.net');
insert into suggest values('네이버','https://www.naver.com');
insert into suggest values('구글','https://www.google.com');
insert into suggest values('아이티윌','http://www.itwill.xyz');

commit;

src / main/ java > xyz.itwill.dao)
JdbcDAO.java (필요함)

package xyz.itwill.dao;

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

import javax.naming.InitialContext;
import javax.naming.NamingException;
import javax.sql.DataSource;

//JDBC 기능을 제공하는 DAO 클래스가 상속받아 사용하기 위해 작성된 부모클래스 - 추상클래스
// => WAS 프로그램에 의해 관리되는 DataSource 객체를 제공받아 필드에 저장 - 정적영역에 작성하여 한번만 실행
// => DataSource 객체로부터 Connection 객체를 제공받아 반환하는 메소드
// => 매개변수로 전달받은 JDBC 관련 객체를 제거하는 메소드
public abstract class JdbcDAO {//상속만을 목적으로 작성된 클래스
	private static DataSource dataSource;
	
	static {
		try {
			dataSource=(DataSource)new InitialContext().lookup("java:comp/env/jdbc/oracle");
		} catch (NamingException e) {
			e.printStackTrace();
		}	
	}
		
	public Connection getConnection() throws SQLException {
		return dataSource.getConnection();
	}
	
	public void close(Connection con) {
		try {
			if(con!=null) con.close();
		} catch (SQLException e) {
			e.printStackTrace();
		}	
	}
	
	public void close(Connection con, PreparedStatement pstmt) {
		try {
			if(pstmt!=null) pstmt.close();
			if(con!=null) con.close();
		} catch (SQLException e) {
			e.printStackTrace();
		}	
	}
	
	public void close(Connection con, PreparedStatement pstmt, ResultSet rs) {
		try {
			if(rs!=null) rs.close();
			if(pstmt!=null) pstmt.close();
			if(con!=null) con.close();
		} catch (SQLException e) {
			e.printStackTrace();
		}	
	}
}

SuggestDAO.java

package xyz.itwill.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import xyz.itwill.dto.SuggestDTO;

public class SuggestDAO extends JdbcDAO {
	private static SuggestDAO _dao;
	
	private SuggestDAO() {
		// TODO Auto-generated constructor stub
	}
	
	static {
		_dao=new SuggestDAO();
	}
	
	public static SuggestDAO getDAO() {
		return _dao;
	}
	
	//검색어를 전달받아 SUGGEST 테이블에 저장된 제시어 관련 정보를 검색하여 List 객체로 반환하는 메소드
	public List<SuggestDTO> selectSuggestList(String keyword) {
		Connection con=null;
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		List<SuggestDTO> suggestList=new ArrayList<>();
		try {
			con=getConnection();
			
			//전달받은 검색어가 포함된 제시어 관련 정보를 10개만 검색되도록 SQL 명령 작성
			String sql="select rownum, temp.* from (select * from suggest where upper(word)"
					+ " like '%'||upper(?)||'%' order by word) temp where rownum<=10"; //10개이하로 검색되게
			pstmt=con.prepareStatement(sql);
			pstmt.setString(1, keyword);
			
			rs=pstmt.executeQuery();
			
			while(rs.next()) {
				SuggestDTO suggest=new SuggestDTO();
				suggest.setWord(rs.getString("word"));
				suggest.setUrl(rs.getString("url"));
				suggestList.add(suggest);
			}
		} catch (SQLException e) {
			System.out.println("[에러]selectSuggestList() 메소드의 SQL 오류 = "+e.getMessage());
		} finally {
			close(con, pstmt, rs);
		}
		return suggestList;
	}
	
}

webapp > jdbc )
suggest_one .jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 사용자가 검색어를 입력한 경우 검색어가 포함된 제시어를 클라이언트에게 제공하는 JSP 문서 --%>
<%-- => 사용자가 검색어를 입력할 경우 [suggest_two.jsp] 문서를 AJAX 기능으로 요청하여 검색어가
포함된 제시어 관련정보를 XML 데이타로 응답받아 출력 처리  --%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style type="text/css">
#keyword {
	position: absolute;
	top: 100px;
	left: 10px;
	width: 300px;
	font-size: 16px;
}

#suggestDiv {
	position: absolute;
	top: 120px;
	left: 10px;
	width: 300px;
	padding: 3px;
	border: 1px solid black;
	cursor: pointer;
	font-size: 16px;
	background: rgba(255, 255, 255, 1);
	z-index: 999;
	display: none;
}

#choice {
	position: absolute;
	top: 150px; 
	left: 10px;
}
</style>
</head>
<body>
	<h1>제시어 기능</h1>
	<hr>
	<div>
		<%-- 검색어를 입력받기 위한 태그 --%>
		<input type="text" id="keyword">
		
		<%-- 제시어를 제공받아 출력하기 위한 태그 --%>
		<div id="suggestDiv">
			<div id="suggestList"></div>
		</div>
		
		<%-- 선택된 제시어 관련 정보를 출력하기 위한 태그 --%>
		<div id="choice"></div>
	</div>
	
	<script type="text/javascript">
	$("#keyword").focus();
	
	//입력태그에서 키보드를 눌렀다 띈 경우 호출될 이벤트 처리 함수 등록
	$("#keyword").keyup(function() {
		var keyword=$("#keyword").val();
		//alert(keyword);
		
		if(keyword=="") {//입력태그에 입력값이 없는 경우
			$("#suggestDiv").hide();//제시어 관련 정보를 출력하는 태그가 보여지지 않도록 설정
			return;
		}
		
		$.ajax({
			type: "post",
			url: "suggest_two.jsp",
			data: "keyword="+keyword,
			dataType: "xml",
			success: function(xmlDoc) {
				
			},
			error: function(xhr) {
				alert("에러코드 = "+xhr.status);
			}
		});
	});
	</script>
</body>
</html>

suggest_two .jsp

<?xml version="1.0" encoding="utf-8"?>
<%@page import="xyz.itwill.dao.SuggestDAO"%>
<%@page import="xyz.itwill.dto.SuggestDTO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 검색어를 전달받아 SUGGEST 테이블에 저장된 제시어 관련 정보를 검색하여 XML 데이타로 응답하는 JSP 문서 --%>    
<%
	request.setCharacterEncoding("utf-8");

	String keyword=request.getParameter("keyword");
	
	//검색어를 전달받아 SUGGEST 테이블에 저장된 제시어 관련 정보를 검색하여 List 객체로 
	//반환하는 DAO 클래스의 메소드 호출
	List<SuggestDTO> suggestList=null;
	if(keyword!=null && !keyword.equals("")) {//전달값이 있는 경우
		suggestList=SuggestDAO.getDAO().selectSuggestList(keyword); 
	}
%>
<result>
	<% if(suggestList!=null && !suggestList.isEmpty()) {//검색된 제시어 관련 정보가 있는 경우 %>
	<code>success</code>
	<data><![CDATA[
		[
		<% for(int i=0;i<suggestList.size();i++) { %>
			<% if(i>0) { %>,<% } %>
			{"word":"<%=suggestList.get(i).getWord()%>","url":"<%=suggestList.get(i).getUrl()%>"}
		<% } %>
		]
	]]></data>		
	<% } else {//검색된 제시어 관련 정보가 없는 경우%>
	<code>empty</code>		
	<% } %>
</result>

아이디중복검사

- sql 테이블 만들기 ▼

create table ajax_member(id varchar2(30) primary key, passwd varchar2(100)
, name varchar2(50), email varchar2(100));

src / main/ java > xyz.itwill.dto)
AjaxMemberDTO .java

package xyz.itwill.dto;

//create table ajax_member(id varchar2(30) primary key, passwd varchar2(100)
//	, name varchar2(50), email varchar2(100));

public class AjaxMemberDTO {
	private String id;
	private String passwd;
	private String name;
	private String email;
	
	public AjaxMemberDTO() {
		// TODO Auto-generated constructor stub
	}

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getPasswd() {
		return passwd;
	}

	public void setPasswd(String passwd) {
		this.passwd = passwd;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}
}

src / main/ java > xyz.itwill.dao)
AjaxMemberDAO .java

package xyz.itwill.dao;

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

import xyz.itwill.dto.AjaxMemberDTO;

public class AjaxMemberDAO extends JdbcDAO {
	private static AjaxMemberDAO _dao;
	
	private AjaxMemberDAO() {
		// TODO Auto-generated constructor stub
	}
	
	static {
		_dao=new AjaxMemberDAO();
	}
	
	public static AjaxMemberDAO getDAO() {
		return _dao;
	}
	
	//회원정보를 전달받아 AJAX_MEMBER 테이블의 회원정보로 삽입하고 삽입행의 갯수를 반환하는 메소드
	public int insertAjaxMember(AjaxMemberDTO ajaxMember) {
		Connection con=null;
		PreparedStatement pstmt=null;
		int rows=0;
		try {
			con=getConnection();
			
			String sql="insert into ajax_member values(?,?,?,?)";
			pstmt=con.prepareStatement(sql);
			pstmt.setString(1, ajaxMember.getId());
			pstmt.setString(2, ajaxMember.getPasswd());
			pstmt.setString(3, ajaxMember.getName());
			pstmt.setString(4, ajaxMember.getEmail());
			
			rows=pstmt.executeUpdate();
		} catch (SQLException e) {
			System.out.println("[에러]insertAjaxMember() 메서드의 SQL 오류 = "+e.getMessage());
		} finally {
			close(con, pstmt);
		}
		return rows;
	}
	
	//아이디를 전달받아 AJAX_MEMBER 테이블에 저장된 회원정보를 검색하여 DTO 객체로 반환하는 메소드
	public AjaxMemberDTO selectAjaxMember(String id) {
		Connection con=null;
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		AjaxMemberDTO ajaxMember=null;
		try {
			con=getConnection();
			
			String sql="select * from ajax_member where id=?";
			pstmt=con.prepareStatement(sql);
			pstmt.setString(1, id);
			
			rs=pstmt.executeQuery();
			
			if(rs.next()) {
				ajaxMember=new AjaxMemberDTO();
				ajaxMember.setId(rs.getString("id"));
				ajaxMember.setPasswd(rs.getString("passwd"));
				ajaxMember.setName(rs.getString("name"));
				ajaxMember.setEmail(rs.getString("email"));
			}
 		} catch (SQLException e) {
			System.out.println("[에러]selectAjaxMember() 메서드의 SQL 오류 = "+e.getMessage());
		} finally {
			close(con, pstmt);
		}
		return ajaxMember;
	}
}

main > webapp >jdbc )
member_id_check .jsp

<?xml version="1.0" encoding="utf-8"?>
<%@page import="xyz.itwill.dao.AjaxMemberDAO"%>
<%@page import="xyz.itwill.dto.AjaxMemberDTO"%>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 아이디를 전달받아 AJAX_MEMBER 테이블에 저장된 회원정보를 검색하여 아이디 사용 가능
여부를 XML 데이타로 응답하는 JSP 문서 --%>
<%
	String id=request.getParameter("id");

	if(id==null || id.equals("")) {
		response.sendError(HttpServletResponse.SC_BAD_REQUEST);
		return;
	}
	
	//아이디를 전달받아 AJAX_MEMBER 테이블에 저장된 회원정보를 검색하여 DTO 객체로 반환하는
	//DAO 클래스의 메소드 호출
	AjaxMemberDTO ajaxMember=AjaxMemberDAO.getDAO().selectAjaxMember(id);
%>
<result>
	<% if(ajaxMember!=null) {//아이디로 검색된 회원정보가 있는 경우 - 아이디 중복(아이디 사용 불가능) %>
	<code>impossible</code>	
	<% } else {//아이디로 검색된 회원정보가 있는 경우 - 아이디 미중복(아이디 사용 가능) %>
	<code>possible</code>	
	<% } %>
</result>

member_join_action .jsp

<%@page import="xyz.itwill.dao.AjaxMemberDAO"%>
<%@page import="xyz.itwill.dto.AjaxMemberDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 회원정보를 전달받아 AJAX_MEMEBR 테이블에 삽입하고 [member_join_result.jsp] 문서를
요청할 수 있는 URL 주소를 전달하여 응답하는 JSP 문서 --%>    
<%
	if(request.getMethod().equals("GET")) {
		response.sendError(HttpServletResponse.SC_BAD_REQUEST);
		return;
	}

	request.setCharacterEncoding("utf-8");
	
	String id=request.getParameter("id");
	String passwd=request.getParameter("passwd");
	String name=request.getParameter("name");
	String email=request.getParameter("email");
	
	AjaxMemberDTO ajaxMember=new AjaxMemberDTO();
	ajaxMember.setId(id);
	ajaxMember.setPasswd(passwd);
	ajaxMember.setName(name);
	ajaxMember.setEmail(email);
	
	AjaxMemberDAO.getDAO().insertAjaxMember(ajaxMember);
	
	response.sendRedirect("member_join_result.jsp");
%>

member_join_input .jsp - 실행문

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 회원정보를 입력받기 위한 JSP 문서 --%>
<%-- => [회원가입] 태그를 클릭한 경우 form 태그를 사용하여 [member_join_action.jsp] 문서를 
POST 방식으로 요청 - 사용자 입력값(회원정보) 전달 --%>
<%-- form 태그를 사용하여 [member_join_action.jsp] 문서를 요청하기 전에 사용자 입력값에
대한 검증 - 입력검증, 형식검증, 중복검증(AJAX) 등 --%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style type="text/css">
.title {
	width: 100px;
	padding-right: 10px;
	text-align: center;
	font-weight: bold;
}

.input {
	width: 200px;
}

.message {
	width: 500px;
	color: red;
}

.msg {
	display: none;
}

#btn {
	text-align: center;
}
</style>
</head>
<body>
	<h1>회원가입</h1>
	<hr>
	<form action="member_join_action.jsp" method="post" id="joinForm">
	<table>
		<tr>
			<td class="title">아이디</td>
			<td class="input"><input type="text" name="id" id="id"></td>
			<td class="message">
				<span id="idNullMsg" class="msg idMsg">아이디를 입력해 주세요.</span>
				<span id="idValidMsg" class="msg idMsg">아이디를 형식에 맞게 입력해 주세요.</span>
				<span id="idDuplMsg" class="msg idMsg">이미 사용중인 아이디입니다.</span>
			</td>
		</tr>
		<tr>
			<td class="title">비밀번호</td>
			<td class="input"><input type="password" name="passwd" id="passwd"></td>
			<td class="message">
				<span id="passwdNullMsg" class="msg">비밀번호를 입력해 주세요.</span>
				<span id="passwdValidMsg" class="msg">비밀번호를 형식에 맞게 입력해 주세요.</span>
			</td>
		</tr>
		<tr>
			<td class="title">이름</td>
			<td class="input"><input type="text" name="name" id="name"></td>
			<td class="message">
				<span id="nameNullMsg" class="msg">이름을 입력해 주세요.</span>
				<span id="nameValidMsg" class="msg">이름을 형식에 맞게 입력해 주세요.</span>
			</td>
		</tr>
		<tr>
			<td class="title">이메일</td>
			<td class="input"><input type="text" name="email" id="email"></td>
			<td class="message">
				<span id="emailNullMsg" class="msg">이메일을 입력해 주세요.</span>
				<span id="emailValidMsg" class="msg">이메일을 형식에 맞게 입력해 주세요.</span>
			</td>
		</tr>
		<tr>
			<td colspan="2" id="btn"><button type="submit">회원가입</button></td> 
		</tr>
	</table>	
	</form>
	
	<script type="text/javascript">
	/*
	//아이디 중복 검증에 대한 결과값을 저장하기 위한 전역변수 선언
	// => false : 아이디 사용 불가능, true : 아이디 사용 가능
	var idCheckResult=false;

	$("#id").focus();
	
	$("#joinForm").submit(function() {
		//모든 메세지 관련 엘리먼트를 출력되지 않도록 숨김 처리
		$(".msg").hide();
		
		//입력값 검증 결과를 저장하기 위한 변수
		// => false : 검증 실패(form 태그 실행 취소), true : 검증 성공(form 태그 실행) 
		var validResult=true;
		
		var id=$("#id").val();
		var idReg=/^[a-zA-Z]\w{5,19}$/g;
		if(id=="") {
			$("#idNullMsg").show();
			validResult=false;
		} else if(!idReg.test(id)) {
			$("#idValidMsg").show();
			validResult=false;
		} else if(!idCheckResult) {//아이디가 중복된 경우
			$("#idDuplMsg").show();
			validResult=false;
		}
		
		var passwd=$("#passwd").val();
		var passwdReg=/^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[~!@#$%^&*_-]).{6,20}$/g;
		if(passwd=="") {
			$("#passwdNullMsg").show();
			validResult=false;
		} else if(!passwdReg.test(passwd)) {
			$("#passwdValidMsg").show();
			validResult=false;
		}
		
		var name=$("#name").val();
		var nameReg=/^[가-힣]{2,10}$/g;
		if(name=="") {
			$("#nameNullMsg").show();
			validResult=false;
		} else if(!nameReg.test(name)) {
			$("#nameValidMsg").show();
			validResult=false;
		}
		
		var email=$("#email").val();
		var emailReg=/^([a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+(\.[-a-zA-Z0-9]+)+)*$/g;
		if(email=="") {
			$("#emailNullMsg").show();
			validResult=false;
		} else if(!emailReg.test(email)) {
			$("#emailValidMsg").show();
			validResult=false;
		}
		
		return validResult;
	});
	
	$("#id").keyup(function() {
		idCheckResult=false;
		
		var id=$("#id").val();
		if(id.length<6) return;
		
		$.ajax({
			type: "get",
			url: "member_id_check.jsp",
			data: "id="+id,
			dataType: "xml",
			success: function(xmlDoc) {
				var code=$(xmlDoc).find("code").text();
				if(code=="possible") {
					idCheckResult=true;
				}
			}, 
			error: function(xhr) {
				alert("에러코드 = "+xhr.status);
			}
		});
	});
	
	$("#id").blur(function() {
		var id=$("#id").val();
		var idReg=/^[a-zA-Z]\w{5,19}$/g;
		if(id=="") {
			$("#idNullMsg").show();
		} else if(!idReg.test(id)) {
			$("#idValidMsg").show();
		} else if(!idCheckResult) {//아이디가 중복된 경우
			$("#idDuplMsg").show();
		}
	});
	*/
	
	$("#id").focus();
	$("#joinForm").submit(function() {
		$(".msg").hide();
		
		var validResult=true;
		
		var id=$("#id").val();
		var idReg=/^[a-zA-Z]\w{5,19}$/g;
		if(id=="") {
			$("#idNullMsg").show();
			validResult=false;
		} else if(!idReg.test(id)) {
			$("#idValidMsg").show();
			validResult=false;
		} else {//형식에 맞는 아이디가 입력된 경우 - 중복 검사
			//문제점)비동기식 방식으로 아이디를 검사하는 웹프로그램을 요청한 경우 실행결과를
			//응답받기 전에 form 태그가 실행 가능 - 정상적인 아이디 중복 검사 실행 불가능
			//해결법)아이디를 검사하는 웹프로그램을 동기식 방식으로 요청하여 실행결과를 응답받아 처리
			$.ajax({
				type: "get",
				url: "member_id_check.jsp",
				data: "id="+id,
				//async : 동기식 통신 또는 비동기식 통신을 구분하기 위한 속성
				// => false : 동기식 통신, true : 비동기식 통신 - 기본
				async: false,
				dataType: "xml",
				success: function(xmlDoc) {
					var code=$(xmlDoc).find("code").text();
					if(code=="impossible") {//아이디가 중복된 경우
						$("#idDuplMsg").show();
						validResult=false;
					}
				}, 
				error: function(xhr) {
					alert("에러코드 = "+xhr.status);
				}
			});
		}
		
		var passwd=$("#passwd").val();
		var passwdReg=/^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[~!@#$%^&*_-]).{6,20}$/g;
		if(passwd=="") {
			$("#passwdNullMsg").show();
			validResult=false;
		} else if(!passwdReg.test(passwd)) {
			$("#passwdValidMsg").show();
			validResult=false;
		}
		
		var name=$("#name").val();
		var nameReg=/^[가-힣]{2,10}$/g;
		if(name=="") {
			$("#nameNullMsg").show();
			validResult=false;
		} else if(!nameReg.test(name)) {
			$("#nameValidMsg").show();
			validResult=false;
		}
		
		var email=$("#email").val();
		var emailReg=/^([a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+(\.[-a-zA-Z0-9]+)+)*$/g;
		if(email=="") {
			$("#emailNullMsg").show();
			validResult=false;
		} else if(!emailReg.test(email)) {
			$("#emailValidMsg").show();
			validResult=false;
		}
		
		return validResult;
	});
	</script>
</body>
</html>

member_join_result .jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 회원가입 메세지를 클라이언트에게 전달하여 응답하는 JSP 문서 --%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
</head>
<body>
	<h1>회원가입 성공</h1>
	<hr>
	<p>회원가입을 축하합니다.</p>
</body>
</html>

저작자표시 비영리 (새창열림)

64Day - welcome_one & welcome_two / books_one & books_two / songs_one & songs_two & JdbcDAO/ SuggestDAO & SuggestDTO & suggest_one & suggest_two/AjaxMemberDAO & AjaxMemberDTO & $$ member_id_check & member_join_action & member_join_input & member_join_re..

1. welcome_one & welcome_two

2 . books_one & books_two

3. songs_one & songs_two & JdbcDAO

4. SuggestDAO & SuggestDTO & suggest_one & suggest_two

5. AjaxMemberDAO & AjaxMemberDTO & $$ member_id_check & member_join_action & member_join_input & member_join_result

- 검색창

- 아이디중복검사

webapp > jquery ) welcome_one .jsp

welcome_two .jsp

검색창 - 연습1

webapp > jquery )

books_one .jsp

books_two .jsp

검색창 연습2

webapp > jquery )

songs_one .jsp

songs_two .jsp

main >webapp> META-INF)+ context.xml

webapp >WEB-INF > lib)+ ojdbc11.jar

검색창 만들기

src / main/ java > xyz.itwill.dto)SuggestDTO .java (sql 만들기)

(sql 만들기)

src / main/ java > xyz.itwill.dao) JdbcDAO.java (필요함)

SuggestDAO.java

webapp > jdbc ) suggest_one .jsp

suggest_two .jsp

아이디중복검사

src / main/ java > xyz.itwill.dto)AjaxMemberDTO .java

src / main/ java > xyz.itwill.dao) AjaxMemberDAO .java

main > webapp >jdbc ) member_id_check .jsp

member_join_action .jsp

member_join_input .jsp - 실행문

member_join_result .jsp

webapp > jquery )
welcome_one .jsp

main >webapp> META-INF)
+ context.xml

webapp >WEB-INF > lib)
+ ojdbc11.jar

src / main/ java > xyz.itwill.dto)
SuggestDTO .java (sql 만들기)

src / main/ java > xyz.itwill.dao)
JdbcDAO.java (필요함)

webapp > jdbc )
suggest_one .jsp

src / main/ java > xyz.itwill.dto)
AjaxMemberDTO .java

src / main/ java > xyz.itwill.dao)
AjaxMemberDAO .java

main > webapp >jdbc )
member_id_check .jsp