Jquery
script 폴더에 저장
<head></head>사이에 입력
<script type="text/javascript" src="../script/jquery-3.6.3.js"></script>
<script type="text/javascript">
// jQuery 준비
$(document).ready(function(){
alert("준비");
});<script type="text/javascript">
// jQuery 준비 => 대상.함수()
$(document).ready(function(){
// alert("준비");
//submit 버튼을 클릭했을때 폼태그 전송되어지면 이벤트 onsubmit()
// id="join" 폼태그 표시 => 전송
$('#join').submit(function(){
// alert("전송");
// class="id" 표시 대상.함수()
if($('.id').val()==""){
alert("아이디 입력하세요");
$('.id').focus();
//대상 지정 * 전체, h1 태그, id=이름 #이름, class=이름 .이름
// $('*').css('color','red');
// $('form').css('color','blue');
return false;
}
//class="pass"
if($('.pass').val()==""){
alert("비밀번호 입력하세요");
$('.pass').focus();
return false;
}
if($('.pass2').val()==""){
alert("비밀번호2 입력하세요");
$('.pass2').focus();
return false;
}
if($('.pass').val() != $('.pass2').val()){
alert("비밀번호 틀림");
$('.pass2').focus();
return false;
}
if($('.name').val()==""){
alert("이름 입력하세요");
$('.name').focus();
return false;
}
if($('.email').val()==""){
alert("이메일 입력하세요");
$('.email').focus();
return false;
}
if($('.email2').val()==""){
alert("이메일2 입력하세요");
$('.email2').focus();
return false;
}
if($('.email').val() != $('.email2').val()){
alert("이메일 틀림");
$('.email2').focus();
return false;
}
});//
// class="dup" 클릭했을때
$('.dup').click(function(){
// alert("클릭");
if($('.id').val()==""){
alert("아이디 입력하세요");
$('.id').focus();
return false;
}
// ajax
// 페이지 이동없이 디비에 가서 아이디 중복체크해서 결과를 가져와서 출력
// idCheck.jsp
$.ajax({
url:'idCheck.jsp',
data:{'id':$('.id').val()},
success:function(result){
// alert(result);
// result.trim() => 결과값 앞뒤로 공백 제거
if(result.trim()=="아이디 중복"){
$('.divresult').html(result).css("color","red");
}else{
$('.divresult').html(result).css("color","blue");
}
}
});
// class="divresult" => 아이디 중복
// $('.divresult').html("아이디 중복").css("color","red");
// $('.divresult').html("아이디 사용가능").css("color","blue");
});
});//준비
</script>
</head>
<body>
<div id="wrap">
<!-- 헤더들어가는 곳 -->
<jsp:include page="../inc/top.jsp" />
<!-- 헤더들어가는 곳 -->
<!-- 본문들어가는 곳 -->
<!-- 본문메인이미지 -->
<div id="sub_img_member"></div>
<!-- 본문메인이미지 -->
<!-- 왼쪽메뉴 -->
<nav id="sub_menu">
<ul>
<li><a href="#">Join us</a></li>
<li><a href="#">Privacy policy</a></li>
</ul>
</nav>
<!-- 왼쪽메뉴 -->
<!-- 본문내용 -->
<article>
<h1>Join Us</h1>
<form action="joinPro.jsp" id="join" method="post">
<fieldset>
<legend>Basic Info</legend>
<label>User ID</label>
<input type="text" name="id" class="id">
<input type="button" value="dup. check" class="dup"><br>
<label></label>
<div class="divresult">아이디 중복체크 결과</div><br>
<label>Password</label>
<input type="password" name="pass" class="pass"><br>
<label>Retype Password</label>
<input type="password" name="pass2" class="pass2"><br>
<label>Name</label>
<input type="text" name="name" class="name"><br>
<label>E-Mail</label>
<input type="email" name="email" class="email"><br>
<label>Retype E-Mail</label>
<input type="email" name="email2" class="email2"><br>
</fieldset>
<fieldset>
<legend>Optional</legend>
<label>Address</label>
<input type="text" name="address"><br>
<label>Phone Number</label>
<input type="text" name="phone"><br>
<label>Mobile Phone Number</label>
<input type="text" name="mobile"><br>
</fieldset>
<div class="clear"></div>
<div id="buttons">
<input type="submit" value="Submit" class="submit">
<input type="reset" value="Cancel" class="cancel">
</div>
</form>- idCheck.jsp
<%@page import="member.MemberDTO"%>
<%@page import="member.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// member/idCheck.jsp?id=kim
String id = request.getParameter("id");
// MemberDAO 객체 생성
// MemberDTO dto = getMember(id) 메서드 호출
MemberDAO dao = new MemberDAO();
MemberDTO dto = dao.getMember(id);
// dto null 아니면 아이디 있음, 아이디 중복
// dto null 이면 아이디 없음, 아이디 사용가능
String result="";
if(dto!=null){
result="아이디 중복";
}else{
result="아이디 사용가능";
}
%>
<%=result%>- main.jsp
<%@page import="board.BoardDTO"%>
<%@page import="java.util.List"%>
<%@page import="board.BoardDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="../css/default.css" rel="stylesheet" type="text/css">
<link href="../css/front.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" type="text/javascript"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/ie7-squish.js" type="text/javascript"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<!--[if IE 6]>
<script src="../script/DD_belatedPNG_0.0.8a.js"></script>
<script>
/* EXAMPLE */
DD_belatedPNG.fix('#wrap');
DD_belatedPNG.fix('#main_img');
</script>
<![endif]-->
<script type="text/javascript" src="../script/jquery-3.6.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// alert("준비");
// class="brown"클릭 했을때 "클릭"
$('.brown').click(function(){
// alert('클릭');
// xml <= 디비에서 가져옴
// <board>
// <tr><subject>제목1</subject><date>2023-01-01</date></tr>
// <tr><subject>제목2</subject><date>2023-01-02</date></tr>
// <tr><subject>제목3</subject><date>2023-01-03</date></tr>
// </board>
// 자바스크립트 배열(json) <= 디비에서 가져옴
var arr=[
{"subject":"제목1","date":"2023-01-01"},
{"subject":"제목2","date":"2023-01-02"},
{"subject":"제목3","date":"2023-01-03"}
];
// 반복해서 출력 .each()
$.each(arr,function(index, item){
// alert(index);
// alert(item.subject);
// alert(item.date);
// 태그 뒤 부분에 추가해서 넣기 append()
$('table').append('<tr><td class="contxt"><a href="#">'+item.subject+'</a></td><td>'+item.date+'</td></tr>');
});
});
});
</script>
</head>
<body>
<div id="wrap">
<!-- 헤더들어가는 곳 -->
<jsp:include page="../inc/top.jsp"/>
<!-- 헤더들어가는 곳 -->
<!-- 메인이미지 들어가는곳 -->
<div class="clear"></div>
<div id="main_img"><img src="../images/main_img.jpg"
width="971" height="282"></div>
<!-- 메인이미지 들어가는곳 -->
<!-- 메인 콘텐츠 들어가는 곳 -->
<article id="front">
<div id="solution">
<div id="hosting">
<h3>Web Hosting Solution</h3>
<p>Lorem impsun Lorem impsunLorem impsunLorem
impsunLorem impsunLorem impsunLorem impsunLorem
impsunLorem impsunLorem impsun....</p>
</div>
<div id="security">
<h3>Web Security Solution</h3>
<p>Lorem impsun Lorem impsunLorem impsunLorem
impsunLorem impsunLorem impsunLorem impsunLorem
impsunLorem impsunLorem impsun....</p>
</div>
<div id="payment">
<h3>Web Payment Solution</h3>
<p>Lorem impsun Lorem impsunLorem impsunLorem
impsunLorem impsunLorem impsunLorem impsunLorem
impsunLorem impsunLorem impsun....</p>
</div>
</div>
<div class="clear"></div>
<div id="sec_news">
<h3><span class="orange">Security</span> News</h3>
<dl>
<dt>Vivamus id ligula....</dt>
<dd>Proin quis ante Proin quis anteProin
quis anteProin quis anteProin quis anteProin
quis ante......</dd>
</dl>
<dl>
<dt>Vivamus id ligula....</dt>
<dd>Proin quis ante Proin quis anteProin
quis anteProin quis anteProin quis anteProin
quis ante......</dd>
</dl>
</div>
<div id="news_notice">
<h3 class="brown">News & Notice</h3>
<table>
<%
// BoardDAO dao=new BoardDAO();
// List<BoardDTO> boardList=dao.getBoardList(1,5);
// for(int i=0;i<boardList.size();i++){
// BoardDTO dto=boardList.get(i);
%>
<%-- <tr><td class="contxt"><a href="#"><%=dto.getSubject()%></a></td> --%>
<%-- <td><%=dto.getDate()%></td></tr> --%>
<%
// }
%>
<!-- <tr><td class="contxt"><a href="#">Vivans....</a></td> -->
<!-- <td>2012.11.02</td></tr> -->
<!-- <tr><td class="contxt"><a href="#">Vivans....</a></td> -->
<!-- <td>2012.11.02</td></tr> -->
<!-- <tr><td class="contxt"><a href="#">Vivans....</a></td> -->
<!-- <td>2012.11.02</td></tr> -->
<!-- <tr><td class="contxt"><a href="#">Vivans....</a></td> -->
<!-- <td>2012.11.02</td></tr> -->
<!-- <tr><td class="contxt"><a href="#">Vivans....</a></td> -->
<!-- <td>2012.11.02</td></tr> -->
</table>
</div>
</article>
<!-- 메인 콘텐츠 들어가는 곳 -->
<div class="clear"></div>
<!-- 푸터 들어가는 곳 -->
<footer>
<hr>
<div id="copy">All contents Copyright 2011 FunWeb 2011 FunWeb
Inc. all rights reserved<br>
Contact mail:funweb@funwebbiz.com Tel +82 64 123 4315
Fax +82 64 123 4321</div>
<div id="social"><img src="../images/facebook.gif" width="33"
height="33" alt="Facebook">
<img src="../images/twitter.gif" width="34" height="34"
alt="Twitter"></div>
</footer>
<!-- 푸터 들어가는 곳 -->
</div>
</body>
</html>-jsonarr.jsp
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="org.json.simple.JSONObject"%>
<%@page import="org.json.simple.JSONArray"%>
<%@page import="board.BoardDTO"%>
<%@page import="java.util.List"%>
<%@page import="board.BoardDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// main/jsonarr.jsp
BoardDAO dao=new BoardDAO();
List<BoardDTO> boardList=dao.getBoardList(1,5);
// 자바를 json 변경하는 => 프로그램 설치
// WEB-INF - lib - json-simple-1.1.1.jar
// 자바배열데이터 => json 바꾸는 작업
// JSON배열
JSONArray arr = new JSONArray();
SimpleDateFormat dateFormat=new SimpleDateFormat("yyyy.MM.dd");
for(int i=0;i<boardList.size();i++){
BoardDTO dto=boardList.get(i);
// BoardDTO 한개의 글 저장
JSONObject object= new JSONObject();
object.put("num", dto.getNum());
object.put("subject", dto.getSubject());
object.put("date", dateFormat.format(dto.getDate()));
// 배열한칸에 json 저장
arr.add(object);
}
%>
<%=arr%>