Server

AJAX STEP 10 - 게시판 목록 보기

IT의 큰손 2023. 5. 18. 10:49
728x90

★게시판 목록 보기

 

■ 필요 파일

Ex14.java
ex14.jsp

Ex14Data.java

 

■ 데이터베이스

select * from tblProduct;

create table tblProductCopy
    as select * from tblProduct;
    
insert into tblProductCopy select * from tblProductCopy;

 

■ 소스코드

  • Ex14.java
package com.test.ajax;

import java.io.IOException;
import java.util.HashMap;
import java.util.List;
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;

@WebServlet("/ex14.do")
public class Ex14 extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		//Ex14.java
		AjaxDAO dao = new AjaxDAO();
		
		Map<String, Integer> map = new HashMap<String,Integer>();
		map.put("begin", 1);
		map.put("end", 10);
		
		List<Ex13DTO> list = dao.listProduct2(map);
		
		req.setAttribute("list", list);

		RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/ex14.jsp");
		dispatcher.forward(req, resp);
	}

}

 

  • Ex14Data.java
package com.test.ajax;

import java.io.IOException;
import java.io.PrintWriter;
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 org.json.simple.JSONArray;
import org.json.simple.JSONObject;

@WebServlet("/ex14data.do")
public class Ex14Data extends HttpServlet {

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		//Ex14Data.java
		//ex14.jsp의 n을 받아오는 역할
		int n = Integer.parseInt(req.getParameter("n"));
		
		AjaxDAO dao = new AjaxDAO();
		
		Map<String, Integer> map = new HashMap<String,Integer>();
		map.put("begin", n);
		map.put("end", n+9);
		
		List<Ex13DTO> list = dao.listProduct2(map);
		
		JSONArray arr = new JSONArray();
		
		for (Ex13DTO dto : list) {
			
			JSONObject obj = new JSONObject();
			obj.put("seq", dto.getSeq());
			obj.put("name", dto.getName());
			obj.put("price", dto.getPrice());
			obj.put("color", dto.getColor());
			
			arr.add(obj);
			
		}
		
		resp.setCharacterEncoding("UTF-8");
		resp.setContentType("application/json");
		
		PrintWriter writer = resp.getWriter();
		
		writer.print(arr);
		
		writer.close();
		
	}

}

 

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://me2.do/5BvBFJ57">
<style>

</style>
</head>
<body>

	<h1>게시판</h1>
	
	<table>
		<tr>
			<th>번호</th>
			<th>제품명</th>
			<th>가격</th>
			<th>색상</th	>		
		</tr>
		<c:forEach items="${list}" var="dto">
		<tr>
			<td>${dto.seq}</td>
			<td>${dto.name}</td>
			<td>${dto.price}</td>
			<td>${dto.color}</td>
		</tr>
		</c:forEach>
	</table>
	
	<div style="text-align: center;">
		<input type="button" value="게시물 더보기" id="btn">
	</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>

	let n = 11;

	$('#btn').click(()=>{
		
		//10개 더 가져오기 > 화면 출력
		
		$.ajax({
			
			type: 'POST',
			url: '/ajax/ex14data.do',
			data: {
				n: n
			},
			dataType: 'json',
			success: (result)=>{
				
				$(result).each((index, item)=>{
					
					$('table tbody').append(
						`
						
							<tr>
								<td>\${item.seq}</td>
								<td>\${item.name}</td>
								<td>\${item.price}</td>
								<td>\${item.color}</td>
							</tr>
					
						`
					);
					
				});
				
				n += 10;
				
// 				console.log(result.length);

				if (result.length == 0) {
					alert('더 이상 게시물이 없습니다.');
					$('#btn').attr('disabled', true);
				}
				
			},
			error: (a,b,c)=>console.log(a,b,c)
			
		});
		
	});

</script>
</body>
</html>

 

 

■ 실행 결과

실행 결과

 

728x90