test.html ( mode 버튼 : 수정,삭제 )
페이지 정보
본문
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{include/layout.html}">
<body>
<div layout:fragment="content">
<br>
<center>
<h1>AJAX TEST</h1>
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 width=700 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" width=700 border=1></table>
</center>
<script th:inline="javascript">
var bno = 20; // t_board에서 존재하는 boardIdx값 입력
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>
</div>
</body>
</html>
- 이전글test.html ( mode 버튼 : 열기,닫기 ) 24.06.13
- 다음글▲ JSON 테스트 ( Advanced REST client 앱 이용 ) 24.06.13
댓글목록
등록된 댓글이 없습니다.