728x90
★ 테이블을 이용한 AJAX
■ 필요 파일들
com.test.java > Ex11.java
com.test.java > Ex11Data.java
com.test.java > Ex11DTO.java
views > ex11.jsp
■ 데이터베이스
create table ajaxTable
(
seq number primary key,
x number not null,
y number not null,
ck char(1) not null --'y', 'n'
);
select * from ajaxTable;
create sequence tableseq;
■ 소스코드
- Ex11.java
package com.test.ajax;
import java.io.IOException;
import java.util.List;
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("/ex11.do")
public class Ex11 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//Ex11.java
AjaxDAO dao = new AjaxDAO();
List<Ex11DTO> list = dao.listCell();
req.setAttribute("list", list);
RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/ex11.jsp");
dispatcher.forward(req, resp);
}
}
- Ex11Data.java
package com.test.ajax;
import java.io.IOException;
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("/ex11data.do")
public class Ex11Data extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//Ex11Data.java
String x = req.getParameter("x");
String y = req.getParameter("y");
String ck = req.getParameter("ck");
System.out.println(x);
System.out.println(y);
System.out.println(ck);
Ex11DTO dto = new Ex11DTO();
dto.setX(x);
dto.setY(y);
dto.setCk(ck);
AjaxDAO dao = new AjaxDAO();
//1. 검사
// - select
//2. 처음 클릭
// - insert
//3. 다시 클릭
// - update
//*** DAO에서는 1개의 메소드가 1개의 업무만 구현한다.
// DAO 안에서는 알고리즘을 구현하지 않는다.
// DAO.메소드() == 딱 1개의 SQL만 실행
//boolean result = dao.checkCell(dto);
if (dao.checkCell(dto)) {
dao.editCell(dto);
} else {
dao.addCell(dto);
}
}
}
- Ex11DTO.java
package com.test.ajax;
import lombok.Data;
@Data
public class Ex11DTO {
private String x;
private String y;
private String ck;
}
- ex11.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>
#tbl1 {
width : auto;
}
#tbl1 td {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h1>테이블 상태 유지</h1>
<table id="tbl1">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$('#tbl1 td').click(function() {
//rgb(255, 215, 0)
//$(this).css('background-color', 'gold');
//alert($(this).css('background-color'));
// alert(this.cellIndex); <td>
// alert(this.parentElement.rowIndex); <tr>
let x = this.cellIndex;
let y = this.parentElement.rowIndex;
let ck = 'n';
console.log(x,y);
if($(this).css('background-color') == 'rgb(255, 215, 0)') {
$(this).css('background-color', 'transparent');
ck = 'n';
}else {
$(this).css('background-color', 'gold');
ck = 'y';
}
//x, y, ck
$.ajax({
type: 'POST',
url: '/ajax/ex11data.do',
data: {
x: x,
y: y,
ck: ck
},
error: (a,b,c)=>console.log(a,b,c)
});
});
//셀 상태 설정
<c:forEach items="${list}" var="dto">
$('#tbl1 tbody')
.children().eq(${dto.y})
.children().eq(${dto.x})
.css('background-color', '${dto.ck == 'y' ? 'gold' : 'transparent'}');
</c:forEach>
</script>
</body>
</html>
- DAO.java
- 1. 검사
- - select
- 2. 처음 클릭
- - insert
- 3. 다시 클릭
- - update
public boolean checkCell(Ex11DTO dto) {
try {
String sql = "select count(*) as cnt from ajaxTable"
+ " where x = ? and y = ?";
pstat = conn.prepareStatement(sql);
pstat.setString(1, dto.getX());
pstat.setString(2, dto.getY());
rs = pstat.executeQuery();
if(rs.next()) {
return rs.getInt("cnt") == 1 ? true : false;
}
} catch (Exception e) {
e.printStackTrace();
}
return false;
}
public void editCell(Ex11DTO dto) {
try {
String sql = "update ajaxTable set ck = ? where x = ? and y = ?";
pstat = conn.prepareStatement(sql);
pstat.setString(1, dto.getCk());
pstat.setString(2, dto.getX());
pstat.setString(3, dto.getY());
pstat.executeUpdate();
} catch (Exception e) {
e.printStackTrace();
}
}
public void addCell(Ex11DTO dto) {
try {
String sql = "insert into ajaxTable (seq, x, y, ck) values (tableseq.nextVal, ?, ?, 'y')";
pstat = conn.prepareStatement(sql);
pstat.setString(1, dto.getX());
pstat.setString(2, dto.getY());
pstat.executeUpdate();
} catch (Exception e) {
e.printStackTrace();
}
}
public List<Ex11DTO> listCell() {
try {
String sql = "select * from ajaxTable";
stat = conn.createStatement();
rs = stat.executeQuery(sql);
List<Ex11DTO> list = new ArrayList<Ex11DTO>();
while (rs.next()) {
Ex11DTO dto = new Ex11DTO();
dto.setX(rs.getString("x"));
dto.setY(rs.getString("y"));
dto.setCk(rs.getString("ck"));
list.add(dto);
}
return list;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
■ 실행 결과
728x90
'Server' 카테고리의 다른 글
| AJAX STEP 9 - 상품 목록 페이지 (0) | 2023.05.17 |
|---|---|
| AJAX STEP 8 - 일기장 AJAX (0) | 2023.05.17 |
| AJAX STEP 6 - 다양한 전송 방법 (2) | 2023.05.17 |
| AJAX STEP 5 - 주소록 조회 (0) | 2023.05.16 |
| AJAX STEP 4 - ID 중복 검사 (0) | 2023.05.16 |
