JSP
- 팝업으로 띄울 상세 내용 위치 및 스타일 정하기
--- 마우스 위치에 띄울려면 마우스 위치 함수 써서 해야함 (x축 y축 알려주는 메소드..)
<div id="detail" style="position:absolute;top:100px;left:300px;border:1px solid blue;display:none"></div>
- 글목록이 비어있을 때와 그렇지 않을 경우를 c:if로 정해줌.
<c:if test="${empty list}">
작성된 글이 없습니다.
</c:if>
<c:if test="${not empty list}">
<table></table>
</c:if>@WebServlet("/board/list")
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
BoardService service = new BoardService();
ArrayList<BoardVo> list = service.getAll();
request.setAttribute("list", list);
RequestDispatcher dis = request.getRequestDispatcher("/board/list.jsp");
dis.forward(request, response);
}
- 글 제목에 마우스를 올리면 a()호출, 마우스를 떼면 b() 호출
<c:forEach var="vo" items="${list}">
<tr>
<td>${vo.num}</td>
<td><a href="${pageContext.request.contextPath}/board/detail?num=${vo.num}"
onmouseover="a(${vo.num})" onmouseout="b()" >${vo.title}</a></td>
<td>${vo.writer}</td>
</tr>
</c:forEach>
- a(num) 함수는 글번호를 파라메터 값으로 가지고 Servlet으로 가서 데이터를 가져옴.
- <div id = "detail"></div>에 팝업으로 띄울 데이터를 JSON.parse 해서 나열하고 <div>를 화면에 보이게 함.
function a(num){
const xhttp = new XMLHttpRequest();
xhttp.onload = function(){
let val = xhttp.responseText;
let obj = JSON.parse(val);
let html = '';
html += 'num: '+obj.num+"<br/>";
html += 'wdate: '+obj.wdate+"<br/>";
html += 'writer: '+obj.writer+"<br/>";
html += 'title: '+obj.title+"<br/>";
html += 'content: '+obj.content+"<br/>";
let div = document.getElementById("detail");
div.innerHTML = html;
div.style.display = ''; // 화면에보이게 none을 지움
}
let param = "?num=" + num;
xhttp.open("GET", "${pageContext.request.contextPath}/board/detailAjax"+param);
xhttp.send();
}
- b() 함수는 화면에 나타났던 <div>를 다시 안보이게 스타일을 변경함.
function b(){
let div = document.getElementById("detail");
div.style.display = 'none';
}
전체 코드
더보기
<%@ 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>
<script>
function a(num){
const xhttp = new XMLHttpRequest();
xhttp.onload = function(){
let val = xhttp.responseText;
let obj = JSON.parse(val);
let html = '';
html += 'num: '+obj.num+"<br/>";
html += 'wdate: '+obj.wdate+"<br/>";
html += 'writer: '+obj.writer+"<br/>";
html += 'title: '+obj.title+"<br/>";
html += 'content: '+obj.content+"<br/>";
let div = document.getElementById("detail");
div.innerHTML = html;
div.style.display = ''; // 화면에보이게 none을 지움
}
let param = "?num=" + num;
xhttp.open("GET", "${pageContext.request.contextPath}/board/detailAjax"+param);
xhttp.send();
}
function b(){
let div = document.getElementById("detail");
div.style.display = 'none';
}
</script>
</head>
<body>
<h3>글목록</h3>
<div id="detail" style="position:absolute;top:100px;left:300px;border:1px solid blue;display:none"></div>
<a href="${pageContext.request.contextPath}/board/add">글작성</a>
<a href="${pageContext.request.contextPath}/index.jsp">뒤로가기</a><br/>
<c:if test="${empty list}">
작성된 글이 없습니다.
</c:if>
<c:if test="${not empty list}">
<table border="1">
<tr>
<th>글번호</th>
<th>제목</th>
<th>작성자</th>
</tr>
<c:forEach var="vo" items="${list}">
<tr>
<td>${vo.num}</td>
<td><a href="${pageContext.request.contextPath}/board/detail?num=${vo.num}" onmouseover="a(${vo.num})" onmouseout="b()" >${vo.title}</a></td>
<td>${vo.writer}</td>
</tr>
</c:forEach>
</table>
</c:if>
</body>
</html>
Servlet
- JSP의 a(num)함수가 보낸 num 파라메터 값을 읽어와 Service 메소드로 글을 검색함.
- 글 정보를 key 와 value로 매칭해 JSON 객체에 넣는다.
- JSON을 문자열로 변환해 JSP로 보낸다.
JSONObject obj = new JSONObject();
obj.put("num", vo.getNum());
obj.put("wdate", vo.getW_date()+"");
obj.put("writer", vo.getWriter());
obj.put("title", vo.getTitle());
obj.put("content", vo.getContent());
String txt = obj.toJSONString();
response.getWriter().append(txt);
전체 코드
더보기
package board.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 org.json.simple.JSONObject;
import board.BoardService;
import board.BoardVo;
/**
* Servlet implementation class BoardDetailAjax
*/
@WebServlet("/board/detailAjax")
public class BoardDetailAjax extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public BoardDetailAjax() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
int num = Integer.parseInt(request.getParameter("num"));
BoardService service = new BoardService();
BoardVo vo = service.getBoard(num);
JSONObject obj = new JSONObject();
obj.put("num", vo.getNum());
obj.put("wdate", vo.getW_date()+"");
obj.put("writer", vo.getWriter());
obj.put("title", vo.getTitle());
obj.put("content", vo.getContent());
String txt = obj.toJSONString();
response.getWriter().append(txt);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}