AJAX
예시 (0)
ajaxTest.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="./js/jquery-3.6.3.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<input type="text" id="ajaxID" name="">
<button class="idCheck">ajax넘기기</button>
<div>
<h1 class="ajaxDone"></h1>
</div>
</body>
<script>
$(".idCheck").on("click", function() {
const msg = $("#ajaxID").val();
$.ajax({
url : "ajaxResult.jsp",
type : "GET",
data : {
ajaxresult : msg
},
success : function(response) {
console.log(response);
$(".ajaxDone").text(response);
},
});
});
</script>
</html>ajaxResult.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String ajaxMsg = request.getParameter("ajaxresult");
System.out.println("ajaxMsg : " + ajaxMsg);
out.println(ajaxMsg); // 이 부분이 response
%>예시 (1)
ajaxTest.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="./js/jquery-3.6.3.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<input type="text" id="ajaxID" name="">
<button class="idCheck">ajax넘기기</button>
<div><h1 class="ajaxDone"></h1></div>
</body>
<script>
$(".idCheck").on("click", function() {
const msg = $("#ajaxID").val();
$.ajax({
url : "ajaxResult.jsp",
type : "GET",
data : {
ajaxresult : msg
},
success : function(response) {
console.log(response);
if(parseInt(response.trim()) === 0) {
$(".ajaxDone").text('done!!!');
}
},
});
});
</script>
</html>ajaxResult.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String ajaxMsg = request.getParameter("ajaxresult");
System.out.println("ajaxMsg : " + ajaxMsg);
if(ajaxMsg.equals("ajax")) {
out.println("0");
}
%>예시 (2) : 회원가입
회원가입 시 아이디 중복확인 jsp
<html>
form....
</html>
// 중복확인버튼
$(".idCheck").on("click", function() {
const sendUserID = $("#userID").val();
$.ajax({
url : "idCheck.jsp",
data : {
userID : sendUserID
},
success : function(response) {
console.log(response);
if (parseInt(response.trim()) === 0 && sendUserID != "") {
//alert("쓸 수 있는 아이디 입니다.");
$("#userID").attr("readonly", true);
$(".idDupl").text("사용가능한 아이디입니다.");
$(".idDupl").css("color", "green");
} else if (sendUserID == "") {
$(".idDupl").text("아이디를 입력하세요.");
$(".idDupl").css("color", "pink");
} else {
//alert("쓸 수 없는 아이디 입니다.");
$(".idDupl").text("쓸 수 없는 아이디 입니다.");
$(".idDupl").css("color", "red");
$("#userID").val("");
$("#userID").focus();
}
},
fail : function(error) {
console.log(error);
}
});
return false;
})idCheck.jsp
<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String userID = request.getParameter("userID");
String driver = "oracle.jdbc.OracleDriver";
String url = "jdbc:oracle:thin:@localhost:1521:xe";
String id = "---";
String pw = "---";
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
int result = 0;
String sql = "SELECT COUNT(*) as COUNT FROM MEMBER02 WHERE USERID = ?";
try {
Class.forName(driver);
conn = DriverManager.getConnection(url, id, pw);
pstmt = conn.prepareStatement(sql);
pstmt.setString(1,userID);
rs = pstmt.executeQuery();
if(rs.next()) {
result = rs.getInt("count");
System.out.println(result);
out.print(result); // 이 부분이 response
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if(pstmt!=null) pstmt.close();
if(conn!=null) conn.close();
}
%>쿠키
쿠키 설정
CookieManager.java
package com.jjang051.utils;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CookieManager {
public static void makeCookie( HttpServletResponse response,
String cookieName,
String cookieValue,
int cookieAge) {
Cookie cookie = new Cookie(cookieName,cookieValue);
cookie.setMaxAge(cookieAge);
cookie.setPath("/");
response.addCookie(cookie);
}
public static String readCookie(HttpServletRequest request,String requestCookieName) {
Cookie cookies[] = request.getCookies();
String responseCookieValue = null;
if(cookies!=null) {
for(Cookie cookie:cookies) {
String cookieName = cookie.getName();
String cookieValue = cookie.getValue();
if(cookieName.equals(requestCookieName)) {
responseCookieValue = cookieValue;
}
}
}
return responseCookieValue;
}
public static void deleteCookie( HttpServletResponse response,
String cookieName) {
makeCookie(response, cookieName, null, 0);
}
}CookieTest.jsp
<%@ 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>
</head>
<body>
<h1>쿠키 테스트</h1>
<%
Cookie cookie = new Cookie("myCookie","에이스");
cookie.setPath(request.getContextPath());
cookie.setMaxAge(60*60);
response.addCookie(cookie);
Cookie oreoCookie = new Cookie("myCookie02","오레오");
cookie.setPath(request.getContextPath());
cookie.setMaxAge(60*60);
response.addCookie(oreoCookie);
%>
</body>
</html>CookieRead.jsp
<%@ 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>
</head>
<body>
<h1>클라이언트에서 넘어온 쿠키 읽어 보기</h1>
<%
Cookie cookies[] = request.getCookies();
if(cookies!=null) {
for(int i=0;i<cookies.length;i++) {
String cookieName = cookies[i].getName();
String cookieValue = cookies[i].getValue();
out.println(cookieName+"==="+cookieValue+"<br>");
}
}
%>
</body>
</html>oneDayPopUp.jsp
<%@ 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>
<script src="./js/jquery-3.6.3.min.js"></script>
<style>
.popup {
position: fixed;
left: 100px;
top: 100px;
border: 1px solid #000;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
width: 400px;
}
.popup h2 {
padding: 20px;
background-color: #111;
color: #fff;
margin: 0;
}
.popup .contents {
padding: 20px;
background-color: #fff;
}
</style>
</head>
<body>
<!-- prettier-ignore -->
<%
String popupMode="on";
Cookie cookies[] = request.getCookies();
if(cookies!=null) {
for(int i=0;i<cookies.length;i++){
String cookieName = cookies[i].getName();
String cookieValue = cookies[i].getValue();
if(cookieName.equals("popupCookie")) {
popupMode=cookieValue;
}
}
}
%>
<% if(popupMode.equals("on")) { %>
<div class="popup">
<h2>공지사항</h2>
<div class="contents">
<p>공지사항입니다.</p>
<p>공지사항입니다.</p>
<p>공지사항입니다.</p>
<p>공지사항입니다.</p>
<p>공지사항입니다.</p>
</div>
<div>
<input type="checkbox" id="onedayCheck" value="1" /> 오늘 하루 이창을 열지 않기
<button class="btn oneday">닫기</button>
</div>
</div>
<% } %>
<script>
$(".oneday").on("click", function () {
console.log($("#onedayCheck").is(":checked"));
//const isChecked = $("#onedayCheck").is(":checked") ? 1 : 0 ;
const isChecked = $("#onedayCheck:checked").val() ;
console.log(isChecked);
$(".popup").hide();
$.ajax({
url: "popupModeProcess.jsp",
type: "GET",
data: { oneday: isChecked },
success: function (response) {
console.log(response);
},
});
return false;
});
</script>
</body>
</html>popupModeProcess.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String oneday = request.getParameter("oneday");
System.out.println(oneday);
if(oneday!=null && oneday.equals("1")){
Cookie popupCookie = new Cookie("popupCookie","off");
popupCookie.setPath(request.getContextPath());
popupCookie.setMaxAge(60*60*24);
response.addCookie(popupCookie);
System.out.println("쿠키 구워졌음");
}
%>sevenDayPopUp.jsp
<%@page import="com.jjang051.utils.CookieManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String popupMode="on";
String popupCookieValue = CookieManager.readCookie(request, "popupCookie02");
if(popupCookieValue!=null && popupCookieValue.equals("off")) {
popupMode = popupCookieValue;
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="./js/jquery-3.6.3.min.js"></script>
<style>
.popup {
position: fixed;
left: 100px;
top: 100px;
border: 1px solid #000;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
width: 400px;
}
.popup h2 {
padding: 20px;
background-color: #111;
color: #fff;
margin: 0;
}
.popup .contents {
padding: 20px;
background-color: #fff;
}
</style>
</head>
<body>
<% if(popupMode.equals("on")) { %>
<div class="popup">
<h2>공지사항</h2>
<div class="contents">
<p>공지사항입니다.</p>
<p>공지사항입니다.</p>
<p>공지사항입니다.</p>
<p>공지사항입니다.</p>
<p>공지사항입니다.</p>
</div>
<div>
<input type="checkbox" id="sevenDayCheck" value="1" /> 오늘 하루 이창을 열지 않기
<button class="btn sevenDay">닫기</button>
</div>
</div>
<%} %>
<script>
$(".sevenDay").on("click",function(){
const isChecked = $("#sevenDayCheck:checked").val();
$(".popup").hide();
$.ajax({
url:"popupModeProcess02.jsp",
type:"GET",
data:{sevenDay:isChecked},
//dataType:"html", // 서버에서 오는 응답의 파일 타입을 미리 지정해 두기...
//contentType:"", // data 속성의 값 (즉 request)의 타입을 지정
success:function(response){
console.log(response);
}
});
})
</script>
</body>
</html>popupModeProcess02.jsp
<%@page import="com.jjang051.utils.CookieManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String sevenDay = request.getParameter("sevenDay");
if(sevenDay!=null && sevenDay.equals("1")){
CookieManager.makeCookie(response, "popupCookie02", "off", 60*60*24*7);
}
%>
Working Abroad ...