blog 9. 글 삭제 ajax, 공통Dto

하이요

 

 

detail.jsp

detail.jsp 상단에 삭제 버튼을 만들어 줍니다.

그리고 자바스크립트, 제이쿼리를 이용한 ajax 문법입니다.

 

이전의 게시물에 ajax 정의를 했었지만 또 하겠습니다.

ㅡㅡㅡㅡAjax 통신 정의ㅡㅡㅡㅡㅡ

Ajax (Async Javascript And XML)는 웹 페이지에서 새로운 데이터를 보여주려고 할 때 웹페이지 전체를 새로고침 하지 않고, 보여주고자 하는 데이터가 포함된 페이지의 일부 만을 로드 하기 위한 기법입니다.

Ajax는 비동기 처리 모델 (또는 non-blocking 이라고도 함)을 사용하여 데이터를 처리합니다.

 

동기 처리 모델에서 브라우저는 자바스크립트 코드를 만나면 스크립트를 처리하기 전까지 다른 작업을 일시 중지하고, 자바스크립트 코드의 처리가 끝난 후 기존 작업을 진행합니다.

반면에 Ajax를 사용하면 브라우저는 서버에 데이터를 요청한 뒤 페이지의 나머지를 로드하고 페이지와 사용자의 상호작용을 처리합니다.

 

Ajax 동작방식

 

• 요청(request) - 브라우저가 서버에 정보를 요청한다.
  type : 요청방식 (get, post, delete, put)   //  url : 요청주소 ( Controller 에서 Servlet이 처리함 )
  
  data : 서버로 보낼 데이터. 
  
  contentType : 응답받을 데이터의 형태, 보통은 데이터를 처리하기위해 JSON 이겠지만 
  Controller의 결과값을 보면 ok , fail 의 단순 문자열이기때문에 text
  
  응답에 성공을 한다면, done(function(data){  '대충 실행될 명령'   } ) 분기로 가서
  응답받은 데이터( data << Ajax 함수의 data 아님. Ajax의 결과값임 )로 해야할 일을 처리합니다.
  
  
• 서버의 동작 - 서버는 JSON, XML 등의 형식으로 데이터를 전달한다.
  최근에는 JSON을 가장 많이 사용하고 있습니다.
  
  
• 응답(response) - 브라우저에서 이벤트가 발생하여 콘텐츠를 처리한다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

<c:if test="${sessionScope.principal.id == dto.userId}">

<button onClick="deleteById(${dto.id})" class="btn btn-danger">삭제</button>

</c:if>

 

<script>

function deleteById(boardId){

$.ajax({

type: "post",

url: "/blog/board?cmd=delete&id="+boardId,

dataType: "json"

}).done(function(result){

console.log(result);

if(result.statusCode == 1){

location.href="index.jsp";

}else{

alert("삭제에 실패하였습니다.");

}

});

}

</script>

 

<c:if test="${sessionScope.principal.id == dto.userId}">
		<button onClick="deleteById(${dto.id})" class="btn btn-danger">삭제</button>
	</c:if>

	<script>
		function deleteById(boardId){
			$.ajax({
				type: "post",
				url: "/blog/board?cmd=delete&id="+boardId,
				dataType: "json"
			}).done(function(result){
				console.log(result);
				if(result.statusCode == 1){
					location.href="index.jsp";
				}else{
					alert("삭제에 실패하였습니다.");
				}
			});
		}
	</script>

 

 

 

BoardDao.java

실제로 글이 지워지도록 sql작성

public int deleteById(int id) { // 회원가입
		String sql = "DELETE FROM board WHERE id = ?";
		Connection conn = DB.getConnection();
		PreparedStatement pstmt = null;
		try {
			pstmt = conn.prepareStatement(sql);
			pstmt.setInt(1, id);
			int result = pstmt.executeUpdate();
			return result;
		} catch (Exception e) {
			e.printStackTrace();
		} finally { // 무조건 실행
			DB.close(conn, pstmt);
		}
		return -1;
	}

 

 

BoardService.java

public int 글삭제(int id) {
		return boardDao.deleteById(id);
	}

 

 

CommonRespDto.java

모든 요청,응답을 이 통합Dto 하나로 관리합니다.

제네릭을 사용하네요.

package com.cos.blog.domain.board.dto;

import lombok.Data;

@Data
public class CommonRespDto<T> {
	private int statusCode; // 1, -1
	private T data;
}

 

 

BoardController.java

else if(cmd.equals("delete")) {
			int id = Integer.parseInt(request.getParameter("id"));

			// DB에서 id값으로 글 삭제
			int result = boardService.글삭제(id);

			// 응답할 json 데이터를 생성
			CommonRespDto<String> commonRespDto = new CommonRespDto<>();
			commonRespDto.setStatusCode(result);
			commonRespDto.setData("성공");

			Gson gson = new Gson();
			String respData = gson.toJson(commonRespDto);
			System.out.println("respData : "+respData);
			PrintWriter out = response.getWriter();
			out.print(respData);
			out.flush();
		}

 

CommonRespDto 는 알아두면 편리한데 제가 아직 개념정리가 덜되어있어서 설명이 어렵습니다.

gston.toJson( JSON으로 변환하고싶은 객체 )

 

 

 

 

결과

 

자신이 작성한 글에만 버튼이 보임.