Ajax 실전 활용 게시판 예시 (비밀번호 체크)

개미Coder

|2024. 6. 24. 14:17

회원가입시에, id 중복 // 비밀번호와 비밀번호 확인 동일한지 체크

프로젝트 xar 파일로 임포트해서 오류나면 Properties 들어가서 해당 경로에서 6.0으로 수정

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!-- JSTL Library -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>박정환 Story</title>
<%-- 현재 컨텍스트 경로 : ${ pageContext.request.contextPath } --%>
<link rel="stylesheet" href="../css/visit.css">
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
	
<script type="text/javascript">
	function del(f) {
		
		let c_pwd = f.c_pwd.value.trim(); // 내가 입력한 비밀번호
		let no = f.no.value; // 게시물의 순서
		let idx = f.idx.value;
		
		if(c_pwd=="") {
			alert("삭제할 게시물의 비밀번호를 반드시 입력해주세요");
			f.c_pwd.value="";
			f.c_pwd.focus();
			return;
		}
		
		// jQuery Ajax : 비밀번호 체크
		$.ajax({
			url		:	"check_pwd.do", 			// VisitCheckAction
			data	:	{"idx":idx, "c_pwd":c_pwd}, // parameter : check_pwd.do?idx=5&c_pwd=1234
			
			dataType: "json",
			success : function(res_data) {
				//            비밀번호 일치      비밀번호 불일치
				// res_data = {"result":true} or {"result":false}
				if(res_data.result==false) {
					alert("삭제할 게시물의 비밀번호가 틀립니다.");
					return;
				}
				// 삭제확인
				if(confirm("정말 삭제하시겠습니까?")==false) {
					return;
				}
				// 삭제처리
				// location.href="delete.do?idx=" + idx + "&no=" + no;
				//             JSP EL 와   JS 변수처리 충돌 : 해결방법 백틱안에 '\'
				location.href=`delete.do?idx=\${ idx }&no=\${ no }`; // javascript 백틱 활용
			},
			error	: function(err) {
				alert(err.responseText);
			}
		});
		
		
	} // end:del()
	
	function modify_form(f) {
		
		let c_pwd = f.c_pwd.value.trim();
		let no = f.no.value;
		let idx = f.idx.value;
		
		if(c_pwd=="") {
			alert("수정할 게시물의 비밀번호를 반드시 입력해주세요");
			f.c_pwd.value="";
			f.c_pwd.focus();
			return;
		}
		
		$.ajax({
			url		:	"check_pwd.do",
			data	:	{"idx":idx, "c_pwd":c_pwd},
			datType : "json",
			success : function(res_data) {
				
				if(res_data.result==false) {
					alert("수정할 게시물의 비밀번호가 틀립니다.");
					return;
				}
				if(confirm("정말 수정하시겠습니까?")==false) {
					return;
				}
				
				location.href=`modify_form.do?idx=\${ idx }&no=\${ no }`;
			},
			error	: function(err) {
				alert(err.responseText);
			}
		});
		
	}
</script>
</head>
<body>
	<div id="box">
		<h1 id="title">여러분의 방문을 환영합니다.</h1>

		<div style="margin-bottom: 10px">
			<input class="btn btn-primary" type="button" value="글쓰기"
			onclick="location.href='insert_form.do'">
		</div>
			<!-- url로 요청하기 -->

		<!-- 내용이 없을 경우 -->
		<c:if test="${ empty requestScope.list }">
			<div id="empty_msg">등록된 게시물이 없습니다.</div>
		</c:if>

		<!-- 내용 -->
		<!-- for(VisitVo vo : list) 동일 -->
		<!-- 글자 자동정렬 Ctrl + Shift + F -->
		<c:forEach var="vo" items="${ requestScope.list }">
		<form class="form-inline">
			<!-- 삭제해야할 idx 게시물 번호도 hidden으로 보낸다 (임시방편) -->
			<input type="hidden" name="idx" value="${ vo.idx }">
			<!-- 현페이지에서 다른페이지에서 정보를 넘겨줄때 정보를 유지하는 기술 -->
			<input type="hidden" name="no"  value="${ vo.no }">
			
			<div class="panel panel-primary" id="p_${ vo.no }">
				<div class="panel-heading">
					<h4><b>${ vo.name }</b>님의 글 : ${ vo.ip }</h4>
				</div>
				<div class="panel-body">
				<a href="https://www.youtube.com/watch?v=hSBGSv0jNHY">link 무료보기</a>
					<div class="mycommon content">${ vo.content }</div>
					<div class="mycommon regdate"><b>작성일자 : </b>${ fn:substring(vo.regdate,0,16) }</div>
					<div class="mycommon pwd">비밀번호${ vo.pwd } : 
						<!-- c_pwd 수정 -->		
						<input class="form-control" type = "password" id="c_pwd">
						<input class="btn btn-info" type = "button" value="수정" onclick="modify_form(this.form)">
						<!-- delete onclick 추가 -->		
						<input class="btn btn-danger" type = "button" value="삭제" onclick="del(this.form);">
					</div>
				</div>
				
			</div>
		</form>
		</c:forEach>
	</div>

</body>
</html>

Servlet 작성하기

package action;

import java.io.IOException;
import java.io.PrintWriter;

import dao.VisitDao;
import db.vo.VisitVo;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class VisitCheckAction
 */
@WebServlet("/visit/check_pwd.do")
public class VisitCheckAction extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		// /check_pwd.do?idx=5&c_pwd=1234
		
		// 수신 인코딩 설정
		request.setCharacterEncoding("utf-8");
		
		// parameter 받기
		int idx = Integer.parseInt(request.getParameter("idx"));
		String c_pwd = request.getParameter("c_pwd");
		
		// idx에 해당되는 게시물 1건을 얻어온다
		VisitVo vo = VisitDao.getInstance().selectOne(idx);
		
		// 비밀번호 비교
		boolean bResult = vo.getPwd().equals(c_pwd);
		
		// 결과전송
		response.setContentType("application/json; charset=utf-8;");
		PrintWriter out = response.getWriter();
		
		// JSON Data 생성 전송 : {"result":true}
		String json = String.format("{\"result\":%b}", bResult);
		
		out.print(json);

	}

}

계산 예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script type="text/javascript">
	// jQuery 초기화
	$(document).ready(function(){
		// 결과보기 버튼이 클릭이 되면
		$("#btn-result").click(function(){
			
			let su1 = $("#su1").val();
			let su2 = $("#su2").val();
			
			let tto = /^[0-9]{1,4}$/;
			
			// 정규식 체크 1~4자리
			if(tto.test(su1)==false) {
				alert("su1의 입력값이 올바르지 않습니다.");
				$("#su1").val("");
				$("#su1").focus();
				return;
			}
			
			if(tto.test(su2)==false) {
				alert("su2의 입력값이 올바르지 않습니다.");
				$("#su2").val("");
				$("#su2").focus();
				return;
			}
			
			// jQuery Ajax요청
			$.ajax({
				
				url		:	"calc.do",				// CalcAction
				data	:	{"su1":su1, "su2":su2}, // parameter : calc.do?su1=5&su2=8
				dataType:	"json",
				success	:	function(res_data){
					// res_data = {"plus": 13, "minus": -3, "multiply":40, "divide":0}
					$("#plus").html(res_data.plus);
					$("#minus").html(res_data.minus);
					$("#multiply").html(res_data.multiply);
					$("#divide").html(res_data.divide);
				},
				error	:	function(err){
					alert(err.responseText);
				}
			});
		});
		
	});
</script>

</head>
<body>
	수1:<input id="su1"> <br>
	수2:<input id="su2">
		<input id="btn-result" type="button" value="결과보기">
	<hr>
	<table width="500" border="1">
		<tr>
			<th width="30%">더하기</th>
			<td><span id="plus"></span></td>
		</tr>
		<tr>
			<th>빼기</th>
			<td><span id="minus"></span></td>
		</tr>
		<tr>
			<th>곱하기</th>
			<td><span id="multiply"></span></td>
		</tr>
		<tr>
			<th>나누기</th>
			<td><span id="divide"></span></td>
		</tr>
	</table>
</body>
</html>

Servlet

package action;

import java.io.IOException;
import java.io.PrintWriter;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class CalcAction
 */
@WebServlet("/calc.do")
public class CalcAction extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		// /calc.do?su1=5&su2=8
		
		// 수신 인코딩 설정
		request.setCharacterEncoding("utf-8");
		
		int su1 = Integer.parseInt(request.getParameter("su1"));
		int su2 = Integer.parseInt(request.getParameter("su2"));
		
		response.setContentType("json; charset=utf-8;");
		PrintWriter out = response.getWriter();
		
		String json = String.format("{\"plus\": %d, \"minus\": %d, \"multiply\": %d, \"divide\": %d}", su1+su2, su1-su2, su1*su2, su1/su2);
		out.print(json);

	}

}

저작자표시

'javaScript↗' 카테고리의 다른 글

Ajax를 이용한 회원관리 예제 (0)	2024.06.25
[오류해결]프로젝트 xar 파일로 import시, 오류날 때 (0)	2024.06.24
★★AJax Start★★ (0)	2024.06.24
[오류해결]JavaScript 함수 실행 먹통될 때 (0)	2024.06.23
[오류주의]javaScript의 치명적인 오류 (함수에 괄호 누락 ()) (0)	2024.06.14

Ajax 실전 활용 게시판 예시 (비밀번호 체크)

계산 예시

'javaScript↗' 카테고리의 다른 글

티스토리툴바