Notice
Recent Posts
Recent Comments
Link
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags more
Archives
Today
Total
관리 메뉴

거니의 velog

231010_AJAX 강의 본문

대덕인재개발원_Front End

231010_AJAX 강의

Unlimited00 2023. 10. 10. 08:44

[index.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>로그인 화면</title>
		<link href="<%= request.getContextPath() %>/css/style07.css" rel="stylesheet" />
	</head>
	<body>
		<header>
			<div class="dlog">
				<!-- 
					로그인 / 로그아웃 - HttpSession을 이용하여 로그인폼 또는 로그아웃폼을 삽입. 
					logpro.jsp를 실행시킨 결과물을 현재 페이지에 삽입
				-->
				<jsp:include page="logpro.jsp"></jsp:include>
			</div>
			<br />
			<a href="join.jsp" target="iboard">회원가입</a>&nbsp;&nbsp;&nbsp;
			<a href="../board/temp.html" target="iboard">게시판</a>
		</header>
		<section>
			<iframe name="iboard" src="../board/temp.html"></iframe>
		</section>
	</body>
</html>

[logpro.jsp]

<%@page import="kr.or.ddit.member.vo.MemberVO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>로그인/로그아웃 처리</title>
		<script src="<%= request.getContextPath() %>/js/jquery-3.7.1.min.js"></script>
		<script>
			$(function(){
				
				$("#login").on("click", function(){
					// 입력한 id, pass값을 가져온다.
					var idVal = $("#id").val().trim();
					var passVal = $("#pass").val().trim();
					
					// 입력데이터 형식 체크 - 정규식
					
					// 로그인처리 - 서버로 보내기
					$.ajax({
						url : '<%= request.getContextPath() %>/logPro.do',
						data : { "id" : idVal, "pass" : passVal },
						type : 'post',
						success : function(res){
							location.href = "<%= request.getContextPath() %>/member/index.jsp";
						},
						error : function(xhr){
							alert("상태 : " + xhr.status)
						},
						dataType : 'html'
					});
				});
				
				$("#logout").on("click", function(){
					$.ajax({
						url : '<%= request.getContextPath() %>/logout.do',
						type : 'post',
						success : function(res){
							location.href = "<%= request.getContextPath() %>/member/index.jsp";
						},
						error : function(xhr){
							alert("상태 : " + xhr.status)
						},
						dataType : 'html'
					});
				});
				
			});
		</script>
	</head>
	<body>
		<% 
			// 로그인 체크 - HttpSession값을 얻어온다.
			MemberVO mvo = (MemberVO) session.getAttribute("loginok");
			String check = (String) session.getAttribute("check");
		%>
		
		<%
			if(mvo == null) { // 로그인 하지 않았다면
		%>	
				<input id="id" type="text" placeholder="id" />
				<input id="pass" type="password" placeholder="pass" />
				<button id="login" type="button">로그인</button>
		<%
			}else if(mvo != null) { // 로그인 했다면
		%>
				<span><%= mvo.getMem_id() %>님 환영합니다.</span>
				<button id="logout" type="button">로그아웃</button>
		<%	
			}
			if(check == "false") {
		%>
				<span id="check">로그인 오류 또는 비회원</span>
		<%	
			}
		%>
	</body>
</html>

[style07.css]

@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;500;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Noto Sans KR", sans-serif;
    color: #333;
    word-break: keep-all;
}

a {
	text-decoration: none;
	color: #333;
}

.cen {
    max-width: 1000px;
    width: 100%;
    margin: auto;
}

/***********************************/

.card-body {
	display: flex;
	flex-direction: column;
}
.divContBox {
	display: flex;
	flex-direction: row;
}
.divCont1 {
	flex: 70%;
}
.divCont2 {
	flex: 30%;
	text-align: right;
}

header {
	padding: 4%;
	height: 200px;
	border: 2px dotted gold;
	margin: 30px;
	background-image: linear-gradient(to bottom, cornflowerBlue, white);
}

section {
	padding: 3%;
	margin: 30px;
}

.dlog {
	border: 1px dotted blue;
	padding: 10px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.dlog input {
	width: calc(150px - 1%);
	height: 30px;
}

iframe[name=iboard] {
	width: 100%;
    height: 500px;
    border: none;
}

- http://localhost/boardpro/member/index.jsp

[LogPro.java]

package kr.or.ddit.member.controller;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import kr.or.ddit.member.service.IMemberService;
import kr.or.ddit.member.service.MemberServiceImpl;
import kr.or.ddit.member.vo.MemberVO;


@WebServlet("/logPro.do")
public class LogPro extends HttpServlet {
	
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		request.setCharacterEncoding("UTF-8");
		
		// 클라이언트 요청시 전송 데이터 받기
		String userId = request.getParameter("id");
		String userPass = request.getParameter("pass");
		
		// service 객체 얻기
		IMemberService service = MemberServiceImpl.getInstance();
		
		// service 메소드 호출하기 - 결과값 받기 - MemberVO
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("id", userId);
		map.put("pass", userPass);
		
		MemberVO vo = service.searchByIdPass(map);
		
		// 결과값을 view 페이지로 이동하기 위해서 저장
		HttpSession session = request.getSession();
		
		if(vo != null) { // 로그인 성공
			session.setAttribute("loginok", vo);
			session.setAttribute("check", "true");
		}else { // 로그인 실패
			session.setAttribute("check", "false");
		}
		
		// forward를 위한 객체 생성
		RequestDispatcher disp = request.getRequestDispatcher("/member/logpro.jsp");
		
		// forward실행
		disp.forward(request, response);
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

[Logout.java]

package kr.or.ddit.member.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;


@WebServlet("/logout.do")
public class Logout extends HttpServlet {
	
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// Session을 삭제한 후 JSP 페이지 이동
		HttpSession session = request.getSession();
		
		session.invalidate(); // 세션 삭제
		
		request.getRequestDispatcher("/member/logpro.jsp").forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

- http://localhost/boardpro/member/index.jsp

[board.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page isELIgnored="true" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>게시판 리스트</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="<%= request.getContextPath() %>/css/style07.css" rel="stylesheet" />
		<script src="<%= request.getContextPath() %>/js/jquery-3.7.1.min.js"></script>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
		<script>
			$(function(){
				var mypath = "<%= request.getContextPath() %>";
				
				var stype = $("#stype option:selected").val().trim();
				var sword = $("#sword").val().trim();
				
				console.log("stype : " + stype);
				console.log("sword : " + sword);
				
				// 실행하자마자 리스트 출력
				$.ajax({
					url : `${mypath}/boardList.do`,
					type : 'post',
					data : {
						'page' : '1',
						'stype' : stype,
						'sword' : sword
					},
					success : function(res){
						
					},
					error : function(xhr){
						alert("상태 : " + xhr.status);
					},
					dataType : 'json'
				});
			});
		</script>
	</head>
	<body>
	
		<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
		  <div class="container-fluid">
		    <a class="navbar-brand" href="javascript:void(0)">Logo</a>
		    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
		      <span class="navbar-toggler-icon"></span>
		    </button>
		    <div class="collapse navbar-collapse" id="mynavbar">
		      <ul class="navbar-nav me-auto">
		        <li class="nav-item">
		          <a class="nav-link" href="javascript:void(0)">Link</a>
		        </li>
		        <li class="nav-item">
		          <a class="nav-link" href="javascript:void(0)">Link</a>
		        </li>
		        <li class="nav-item">
		          <a class="nav-link" href="javascript:void(0)">Link</a>
		        </li>
		      </ul>
		      <form class="d-flex">
		      	<select class="form-select" id="stype" name="stype" style="margin-right: 5px;">
		      		<option value="">전체</option>
		      		<option value="writer">작성자</option>
		      		<option value="subject">제목</option>
		      		<option value="content">내용</option>
		      	</select>
		        <input class="form-control me-2" id="sword" name="sword" type="text" placeholder="Search">
		        <button class="btn btn-primary" type="button">Search</button>
		      </form>
		    </div>
		  </div>
		</nav>
		
		<br /><br />
		
		<div id="result"></div>
		
		<div id="pageList"></div>
		
	</body>
</html>

[style07.css]

@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;500;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Noto Sans KR", sans-serif;
    color: #333;
    word-break: keep-all;
}

a {
	text-decoration: none;
	color: #333;
}

.cen {
    max-width: 1000px;
    width: 100%;
    margin: auto;
}

/***********************************/

.card-body {
	display: flex;
	flex-direction: column;
}
.divContBox {
	display: flex;
	flex-direction: row;
}
.divCont1 {
	flex: 70%;
}
.divCont2 {
	flex: 30%;
	text-align: right;
}

header {
	padding: 4%;
	height: 200px;
	border: 2px dotted gold;
	margin: 30px;
	background-image: linear-gradient(to bottom, cornflowerBlue, white);
}

section {
	padding: 3%;
	margin: 30px;
}

.dlog {
	border: 1px dotted blue;
	padding: 10px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.dlog input {
	width: calc(150px - 1%);
	height: 30px;
}

iframe[name=iboard] {
	width: 100%;
    height: 500px;
    border: none;
}

.navbar { margin : 2% }

.navbar a {
	display: none;!important
	/* visibility: hidden!important; */
}

[BoardList.java]

package kr.or.ddit.board.controller;

import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

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

import kr.or.ddit.board.service.BoardServiceImpl;
import kr.or.ddit.board.service.IBoardService;
import kr.or.ddit.board.vo.BoardVO;
import kr.or.ddit.board.vo.PageVO;


@WebServlet("/boardList.do")
public class BoardList extends HttpServlet {
	
	private static final long serialVersionUID = 1L;
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		request.setCharacterEncoding("utf-8");
		
		// 전송받은 데이터 받기
		int spage = Integer.parseInt(request.getParameter("page"));
		
		// 최초 실행 시 없다.
		String stype = request.getParameter("stype");
		String sword = request.getParameter("sword");
		
		System.out.println("spage : " + spage);
		System.out.println("stype : " + stype);
		System.out.println("sword : " + sword);
		
		IBoardService service = BoardServiceImpl.getInstance();
		
		// 메소드 호출
		PageVO pvo = service.pageInfo(spage, stype, sword); 
		// totalPage, startPage, endPage, start, end 결과를 pvo 객체로 리턴받음.
		
		// 출력할 글 리스트 가져오기
		Map<String, Object> paramMap = new HashMap<String, Object>();
		paramMap.put("start", pvo.getStart());
		paramMap.put("end", pvo.getEnd());
		paramMap.put("stype", stype);
		paramMap.put("sword", sword);
		
		List<BoardVO> boardList = service.selectBoardList(paramMap);
		
		// 리스트 결과를 request에 저장
		request.setAttribute("boardList", boardList);
		request.setAttribute("startPage", pvo.getStartPage());
		request.setAttribute("endPage", pvo.getEndPage());
		request.setAttribute("totalPage", pvo.getTotalPage());
		
		// view 페이지 설정 - forward
		request.getRequestDispatcher("/boardview/boardList.jsp").forward(request, response);
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

[PageVO.java]

package kr.or.ddit.board.vo;

public class PageVO {

	private int start; // 시작 글 번호
	private int end; // 종료 글 번호
	private int startPage; // 시작 페이지 번호
	private int endPage; // 종료 페이지 번호
	
	private int totalPage; // 전체 게시판 페이지 수
	private int totalCount; // 전체 게시판 리스트 개수
	
	private static int perList = 3; // 한 페이지에 출력될 리스트 개수
	private static int perPage = 2; // 한 페이지에 출력될 페이지 번호 개수
	
	public PageVO() {}
	public PageVO(int start, int end, int startPage, int endPage, int totalPage, int totalCount) {
		this.start = start;
		this.end = end;
		this.startPage = startPage;
		this.endPage = endPage;
		this.totalPage = totalPage;
		this.totalCount = totalCount;
	}
	
	public int getStart() {
		return start;
	}
	public void setStart(int start) {
		this.start = start;
	}
	public int getEnd() {
		return end;
	}
	public void setEnd(int end) {
		this.end = end;
	}
	public int getStartPage() {
		return startPage;
	}
	public void setStartPage(int startPage) {
		this.startPage = startPage;
	}
	public int getEndPage() {
		return endPage;
	}
	public void setEndPage(int endPage) {
		this.endPage = endPage;
	}
	public int getTotalPage() {
		return totalPage;
	}
	public void setTotalPage(int totalPage) {
		this.totalPage = totalPage;
	}
	public int getTotalCount() {
		return totalCount;
	}
	public void setTotalCount(int totalCount) {
		this.totalCount = totalCount;
	}
	public static int getPerList() {
		return perList;
	}
	public static void setPerList(int perList) {
		PageVO.perList = perList;
	}
	public static int getPerPage() {
		return perPage;
	}
	public static void setPerPage(int perPage) {
		PageVO.perPage = perPage;
	}
	
	@Override
	public String toString() {
		return "PageVO [start=" + start + ", end=" + end + ", startPage=" + startPage + ", endPage=" + endPage
				+ ", totalPage=" + totalPage + ", totalCount=" + totalCount + "]";
	}
	
}

[IBoardService.java]

package kr.or.ddit.board.service;

import java.util.List;
import java.util.Map;

import kr.or.ddit.board.vo.BoardVO;
import kr.or.ddit.board.vo.PageVO;

public interface IBoardService {

	// 리스트 가져오기 - 한 페이지당 3(n)개씩
	public List<BoardVO> selectBoardList(Map<String, Object> map);
	
	// 전체 글 갯수 구하기
	public int getTotalCnt(Map<String, Object> map);
	
	// 저장
	public int insertBoard(BoardVO vo);
	
	// 수정
	public int updateBoard(BoardVO vo);
	
	// 삭제
	public int deleteBoard(int bno);
	
	// 조회수 증가
	public int updateHit(int bno);
	
	// 페이지별 정보 구하기 - start, end, 총 페이지 수 구하기
	public PageVO pageInfo(int page, String stype, String sword);
	
}

[BoardServiceImpl.java]

package kr.or.ddit.board.service;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import kr.or.ddit.board.dao.BoardDaoImpl;
import kr.or.ddit.board.dao.IBoardDAO;
import kr.or.ddit.board.vo.BoardVO;
import kr.or.ddit.board.vo.PageVO;

public class BoardServiceImpl implements IBoardService {

	private IBoardDAO dao;
	
	// 싱글톤 패턴
	private static BoardServiceImpl service;
	private BoardServiceImpl() {
		dao = BoardDaoImpl.getInstance();
	}
	public static BoardServiceImpl getInstance() {
		if(service == null) service = new BoardServiceImpl();
		return service;
	}
	
	@Override
	public List<BoardVO> selectBoardList(Map<String, Object> map) {
		return dao.selectBoardList(map);
	}

	@Override
	public int getTotalCnt(Map<String, Object> map) {
		return dao.getTotalCnt(map);
	}

	@Override
	public int insertBoard(BoardVO vo) {
		return dao.insertBoard(vo);
	}

	@Override
	public int updateBoard(BoardVO vo) {
		return dao.updateBoard(vo);
	}

	@Override
	public int deleteBoard(int bno) {
		return dao.deleteBoard(bno);
	}

	@Override
	public int updateHit(int bno) {
		return dao.updateHit(bno);
	}
	
	@Override
	public PageVO pageInfo(int page, String stype, String sword) {
		// DB와 관련없는 비즈니스 로직 처리 메서드
		PageVO pvo = new PageVO();
		
		// 전체 글 개수 구하기
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("stype", stype);
		map.put("sword", sword);
		
		int count = this.getTotalCnt(map); // 전체 글 갯수
		
		// 전체 페이지 수 구하기
		int perList = PageVO.getPerList(); // 한 페이지에 출력될 리스트 개수
		int totalPage = (int) Math.ceil( (double) count / perList );
		
		// 페이지 당 start, end 값 구하기
		// 1페이지 - 1, 3
		// 2페이지 - 4, 6
		// 3페이지 - 7, 9 
		// ...
		// 7페이지 - 19, 21->20으로 바꿔야 쿼리 오류가 안남.
		int start = (page - 1) * perList + 1;
		int end = start + perList - 1;
		if(end > count) end = count;
		
		//System.out.println("start : " + start);
		//System.out.println("end : " + end);
		
		// 시작 페이지와 끝 페이지 구하기
		// 1페이지 - 1, 2
		// 2페이지 - 1, 2
		// 3페이지 - 3, 4
		// 4페이지 - 3, 4
		// 5페이지 - 5, 6
		// 6페이지 - 5, 6
		// 7페이지 - 7, 8->7로 바꿔야 쿼리 오류가 안남.
		int perPage = PageVO.getPerPage(); // 한 페이지에 출력될 페이지 번호 개수
		int startPage = ((page - 1) / perPage * perPage) + 1;
		int endPage = startPage + perPage - 1;
		if(endPage > totalPage) endPage = totalPage;
		
		pvo.setStart(start);
		pvo.setEnd(end);
		pvo.setStartPage(startPage);
		pvo.setEndPage(endPage);
		pvo.setTotalPage(totalPage);
		
		return pvo;
	}

}

[boardList.jsp]

<%@page import="com.google.gson.JsonElement"%>
<%@page import="com.google.gson.JsonObject"%>
<%@page import="com.google.gson.Gson"%>
<%@page import="kr.or.ddit.board.vo.BoardVO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	// 서블릿에서 저장한 데이터 꺼내기
	List<BoardVO> boardList = (List<BoardVO>) request.getAttribute("boardList");
	int startPage = (int) request.getAttribute("startPage");
	int endPage = (int) request.getAttribute("endPage");
	int totalPage = (int) request.getAttribute("totalPage");
	
	JsonObject jobj = new JsonObject();
	jobj.addProperty("startPage", startPage);
	jobj.addProperty("endPage", endPage);
	jobj.addProperty("totalPage", totalPage);
	
	Gson gson = new Gson();
	JsonElement jele = gson.toJsonTree(boardList);
	jobj.add("data", jele);
	
	out.print(jobj);
	out.flush();
%>

- http://localhost/boardpro/board/board.jsp

[board.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page isELIgnored="true" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>게시판 리스트</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="<%= request.getContextPath() %>/css/style07.css" rel="stylesheet" />
		<script src="<%= request.getContextPath() %>/js/jquery-3.7.1.min.js"></script>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
		<script defer src="<%= request.getContextPath() %>/js/script.js"></script>
		<script>
			var mypath = "<%= request.getContextPath() %>";
			$(function(){
				
				$.listBoardServer(1);
				
			});
		</script>
	</head>
	<body>
	
		<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
		  <div class="container-fluid">
		    <a class="navbar-brand" href="javascript:void(0)">Logo</a>
		    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
		      <span class="navbar-toggler-icon"></span>
		    </button>
		    <div class="collapse navbar-collapse" id="mynavbar">
		      <ul class="navbar-nav me-auto">
		        <li class="nav-item">
		          <a class="nav-link" href="javascript:void(0)">Link</a>
		        </li>
		        <li class="nav-item">
		          <a class="nav-link" href="javascript:void(0)">Link</a>
		        </li>
		        <li class="nav-item">
		          <a class="nav-link" href="javascript:void(0)">Link</a>
		        </li>
		      </ul>
		      <form class="d-flex">
		      	<select class="form-select" id="stype" name="stype" style="margin-right: 5px;">
		      		<option value="">전체</option>
		      		<option value="writer">작성자</option>
		      		<option value="subject">제목</option>
		      		<option value="content">내용</option>
		      	</select>
		        <input class="form-control me-2" id="sword" name="sword" type="text" placeholder="Search">
		        <button class="btn btn-primary" type="button">Search</button>
		      </form>
		    </div>
		  </div>
		</nav>
		
		<br /><br />
		
		<div id="result"></div>
		
		<div id="pageList"></div>
		
	</body>
</html>

[script.js]

$.listBoardServer = function(cpage){
	
	var stype = $("#stype option:selected").val().trim();
	var sword = $("#sword").val().trim();
	
	//console.log("stype : " + stype);
	//console.log("sword : " + sword);
	
	// 실행하자마자 리스트 출력
	$.ajax({
		url : `${mypath}/boardList.do`,
		type : 'post',
		data : {
			'page' : cpage,
			'stype' : stype,
			'sword' : sword
		},
		success : function(res){
			
			var code = "<div class='container mt-3'>";
			code += "<div id='accordion'>";
			
			$.each(res.data, function(i, v){
				code += `<div class="card">
							<div class="card-header">
								<a class="btn" data-bs-toggle="collapse" href="#collapse${v.num}">
									${v.subject}
								</a>
							</div>
							<div id="collapse${v.num}" class="collapse show" data-bs-parent="#accordion">
								<div class="card-body">
									<div class="divContBox">
										<div class="divCont1">
											작성자 <span class="wr">${v.writer}</span> 
											이메일 <span class="em">${v.mail}</span> 
											조회수 <span class="fit">${v.hit}</span> 
											날짜 <span class="date">${v.wdate}</span>
										</div>
										<div class="divCont2">
											<button idx="${v.num}" class="modifyCont btn btn-warning btn-sm" type="button">수정</button>
											<button idx="${v.num}" class="removeCont btn btn-danger btn-sm" type="button">삭제</button>
										</div>
									</div>
									<div>${v.content}</div>
									<div>댓글쓰기 textarea 등록버튼</div>
								</div>
							</div>
						</div>`;
			}); // 반복문 끝
			
			code += "</div>";
			code += "</div>";
			
			$("#result").html(code);
			
			// 페이지 번호 만들기
			
		},
		error : function(xhr){
			alert("상태 : " + xhr.status);
		},
		dataType : 'json'
	});

}

- http://localhost/boardpro/board/board.jsp

 

'대덕인재개발원_Front End' 카테고리의 다른 글

231012_AJAX 강의  (0) 2023.10.12
231011_AJAX 강의  (0) 2023.10.11
231006_AJAX 강의  (0) 2023.10.06
231005_AJAX 강의  (0) 2023.10.05
231004_AJAX 강의  (0) 2023.10.02
'대덕인재개발원_Front End' Related Articles more