[댓글 작성 구현하기]
댓글창에 댓글을 달고 작성이라는 버튼을 누르면 비동기 형태로 댓글이 달리는 형태를 구현 해보자.
▶ 댓글 달 servlet 생성
package img_reps.controller;
import java.io.IOException;
import java.util.ArrayList;
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;
import img_reps.ImgrepVo;
import img_reps.ImgrepsService;
/**
* Servlet implementation class addreps
*/
@WebServlet("/imgrep/add")
public class addreps extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public addreps() {
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("euc-kr");
response.setCharacterEncoding("euc-kr");
response.setContentType("text/html; charset = EUC-KR");
int pnum = Integer.parseInt(request.getParameter("pnum"));
String writer = request.getParameter("writer");
String content = request.getParameter("content");
ImgrepsService service = new ImgrepsService();
service.add(new ImgrepVo(0,pnum,writer,content));
ArrayList<ImgrepVo> reps = service.getReps(pnum);
JSONArray arr = new JSONArray();
for (ImgrepVo vo : reps ) {
JSONObject obj = new JSONObject();
obj.put("writer", vo.getWriter());
obj.put("content", vo.getContent());
arr.add(obj);
}
request.setAttribute("reps", reps);
String txt = arr.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);
}
}
● int pnum = Integer.parseInt(request.getParameter("pnum"));
pnum은 글 번호이다. 댓글이 달릴 글 번호를 인식하고 있어 다른 글에 댓글이 달리지 않도록 해준다.
● String writer = request.getParameter("writer");
String content = request.getParameter("content");
작성자는 로그인 한 사람으로 받아오고, 내용은 입력한 내용을 불러와 변수에 저장한다.
● ImgrepsService service = new ImgrepsService();
service.add(new ImgrepVo(0,pnum,writer,content));
그 후 Imgreps (댓글 테이블) 객체를 생성해서 추가하기를 해준다.
● ArrayList<ImgrepVo> reps = service.getReps(pnum);
Dao를 살펴 보면 하기와 같은 쿼리를 구현 해 놓았는데, 이는 같은 pnum을 가진 것들을 골라내어 한번에 리스트로 보여 줄 예정이라 그렇다.
● JSONArray arr = new JSONArray();
JSON Array 객체를 생성하고
「
● for (ImgrepVo vo : reps ) {
ArrayList<ImgrepVo> reps 의 reps 변수에 저장 된 ImgrepVo 클래스의 객체들을 JSON 형식으로 변환 하는 과정이다.
● JSONObject obj = new JSONObject();
JSONObject 클래스의 객체를 생성하고 이 객체는 JSON 형식으로 데이터를 생성하는 역할을한다.
● obj.put("writer", vo.getWriter());
JSONObject obj에 put 추가를하는데 wirter (키)에 vo.getWriter() vo 객체에서 추출한 작성자 이름을 (값) 설정한다.
● obj.put("content", vo.getContent());
JSONObject obj에 put 추가를하는데 content (키)에 vo.getContent() vo 객체에서 추출한 작성자 이름을 (값) 설정한다.
● arr.add(obj); }
JSONArray 클래스의 add() 메서드를 사용하여 JSONObject 객체를 arr이라는 배열 변수에 추가한다.
이 과정의 궁극적인 목표는 reps 변수에 저장된 모든 ImgrepVo 객체들이 JSON 형식으로 변환되어 arr 배열에 저장 되는 것이다. 」
● request.setAttribute("reps", reps)
reps 변수에 저장된 데이터를 reps라는 이름으로 Servlet 내부에서 공유하는 객체인 request 객체에 저장한다. JSP 파일에서 reps 이름으로 request 객체에 저장된 데이터에 접근이 가능하다.
● String txt = arr.toJSONString()
JSON 데이터를 HTTP 응답으로 반환할 수 있도록 arr 배열에 저장된 JSON 형식의 데이터를 문자열로 변환한다.
● response.getWriter().append(txt)
클라이언트에서는 HTTP 응답으로 전송된 JSON 데이터를 수신할 수 있게 txt 문자열을 HTTP 응답으로 반환한다.
▶ jps <body> 에 댓글 입력하면 업데이트 될 공간을 구성 해준다
<body>
<input type = "button" value ="작성" onclick = "a(${list.num })">
<div id = "div_${list.num }">
<c:forEach var = "reps" items = "${list.reps }">
${reps.content } (작성자 : ${reps.writer} )<br/>
</c:forEach>
</div>
</body>
▶ script 에 함수 a 기능을 구현 해서 작성을 하게 되면 실행 될 함수 코드를 작성 해주고 페이지의 교환 없는 비동기형 댓글 달기를 구현 해준다
<script>
function a (num) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function(){
let val = xhttp.responseText;
console.log(val);
let arr = JSON.parse(val);
let html = ' ';
for (let obj of arr){
html += obj.content + "(writer :" + obj.writer + " )<br/>";
}
let div = document.getElementById("div_" + num);
div.innerHTML = html;
}
let param = "?pnum=" + num;
param += "&writer=${sessionScope.loginId }" ;
param += "&content=" + document.getElementById("rep_" + num ).value;
xhttp.open("GET" , "${pageContext.request.contextPath }/imgrep/add" + param);
xhttp.send();
}
</script>
이렇게 하면 댓글이 잘 작성 된다.
'비동기 요청' 카테고리의 다른 글
| [비동기 요청] 비동기 요청을 이용한 이미지 게시판 만들기 ④ (0) | 2023.04.07 |
|---|---|
| [비동기 요청] 비동기 요청을 이용한 이미지 게시판 만들기 ③ (0) | 2023.04.06 |
| [비동기 요청] 비동기 요청을 이용한 이미지 게시판 만들기 ② (0) | 2023.04.06 |
| [비동기 요청] 비동기 요청을 이용한 이미지 게시판 만들기 ① (0) | 2023.04.06 |
