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
'Server' 카테고리의 다른 글
| 게시판 개발 STEP 1 - Ajax, Json, Oracle, JDBC etc.. (0) | 2023.05.31 |
|---|---|
| AJAX STEP 11 - Map (0) | 2023.05.18 |
| AJAX STEP 9 - 상품 목록 페이지 (0) | 2023.05.17 |
| AJAX STEP 8 - 일기장 AJAX (0) | 2023.05.17 |
| AJAX STEP 7 - 테이블 저장 AJAX (0) | 2023.05.17 |
