test.html ( 글쓰기 )
페이지 정보
본문
<!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>
<!-- 글 작성 -->
<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+"' 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("");
}
}
});
});
</script>
</div>
</body>
</html>
<!--
==== 설명 ====
JSON.stringify() : stringify 메소드는 JSON 객체를 String 객체로 변환시켜준다.
JSON.parse() : parse 메소드는 string 객체를 JSON 객체로 변환시켜준다.
-->
- 이전글test.html ( 리스트 출력 ) 24.06.13
- 다음글test.html ( mode 버튼 : 열기,닫기 ) 24.06.13
댓글목록
등록된 댓글이 없습니다.