sboard/reply.jsp ( 글 수정,삭제 ) > SPRING1

• 목록

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ include file="/WEB-INF/views/include/header.jsp" %>

<center> 

<h3>AJAX TEST</h3>

Total : <span id="total_conunt"></span>

<style>

#modDiv {

width: 300px;

height: 100px;

background-color: gray;

position: absolute;

top: 50%;

left: 50%;

margin-top: -50px;

margin-left: -150px;

padding: 10px;

z-index: 1000;

}

</style>

<!-- MOD 버튼 -->

<table id='modDiv' style="display:none;">

<tr>

<td class='modal-title'></td>

</tr>

<tr>

<td><input type='text' id='replytext'></td>

</tr>

<tr>

<td>

<button type="button" id="replyModBtn">수정</button>

<button type="button" id="replyDelBtn">삭제</button>

<button type="button" id='closeBtn'>닫기</button>

</td>

</tr>

</table>

<!-- 글 작성 -->

<table border=1>

<tr>

<td>글쓴이</td>

<td><input type='text' name='replyer' id='newReplyWriter'></td>

<td>댓글 내용</td>

<td><input type='text' name='replytext' id='newReplyText'></td>

<td></td>

<td><button id="replyAddBtn">댓글 작성</button></td>

</tr>

</table>

<br>

<!-- 댓글 목록 출력 영역 -->

<table id="replies" border=1>

</table>

<script>

var bno = 15; // tbl_board에서 존재하는 bno값 입력

getAllList();

// 글 목록

function getAllList() { // 리스트 출력 확인후 목록 갱신시 함수 호출로 처리 

$.getJSON("/replies/all/"+bno,

function(data){

$("#total_conunt").text(data.length);//리스트 갯수

var str="";

$(data).each(

function(){

str += "<tr>"

+ "<td>"+this.rno+"</td>"

+ "<td>"+this.bno+"</td>"

+ "<td>"+this.replyer+"</td>"

+ "<td>"+this.replytext+"</td>"

+ "<td data-rno='"+this.rno+"' data-str='"+this.replytext+"' class='replyLi'><button>mode</button></td>"

+ "</tr>"

}

);

$("#replies").html(str);

}

);

}

// 글 등록

$("#replyAddBtn").on("click",function(){

var replyer = $("#newReplyWriter").val();

var replytext = $("#newReplyText").val();

$.ajax({

type: 'post',

url: '/replies/',

headers: {

"Content-Type" : "application/json"

},

dataType: 'text',

data:JSON.stringify({

bno : bno,

replyer : replyer,

replytext : replytext

}),

success: function(result){

if(result == 'success'){

alert("글 등록됨");

getAllList(); //목록 출력

//글 작성후 null처리

$("#newReplyWriter").val("");

$("#newReplyText").val("");

}

}

});

});

//mode 열기

$("#replies").on("click", ".replyLi button", function() {

var reply = $(this).parent(); //자기 자신의 부모 요소를 선택한다. <tr>

var rno = reply.attr("data-rno");

var replytext = reply.attr("data-str");

//alert(rno + " : " + replytext);

$(".modal-title").html(rno);

$("#replytext").val(replytext);

$("#modDiv").show("slow");

});

// mode닫기

$("#closeBtn").on("click", function() {

$("#modDiv").hide("slow");

getAllList();

});

// 글 수정

$("#replyModBtn").on("click",function(){

var rno = $(".modal-title").html();

var replytext = $("#replytext").val();

$.ajax({

type:'put',

url:'/replies/'+rno,

headers: {

"Content-Type": "application/json",

"X-HTTP-Method-Override": "PUT"

},

dataType:'text',

data:JSON.stringify({

replytext : replytext

}),

success:function(result){

if(result == 'success'){

alert("수정 되었습니다.");

$("#modDiv").hide("slow");

getAllList();

}

}

});

});

// 글 삭제

$("#replyDelBtn").on("click", function() {

var rno = $(".modal-title").html();

$.ajax({

type : 'delete',

url : '/replies/' + rno,

headers : {

"Content-Type" : "application/json",

"X-HTTP-Method-Override" : "DELETE"

},

dataType : 'text',

success : function(result) {

if (result == 'success') {

alert("삭제 되었습니다.");

$("#modDiv").hide("slow");

getAllList();

}

}

});

});

</script>

<%@ include file="/WEB-INF/views/include/footer.jsp" %> 

[[ 설명 ]]

HTTP 메소드 오버라이드 추가하기 ( "X-HTTP-Method-Override": "PUT" 또는 "X-HTTP-Method-Override" : "DELETE" )

어떤 HTTP 프록시는 임시적인 HTTP 메소드나 새로운 HTTP 메소드 (PATCH 같은) 를 지원하지 않는다. 그런 경우에 프로토콜 전체를 위반하는 방식으로 HTTP 메소드를 다른 HTTP 메소드로 “프록시” 하는 것이 가능하다.

이렇게 동작