UI 구현할 test.jsp 만들기
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
<h2>commentTest</h2>
<button id="sendBtn" type="button">SEND</button>
<div id=commentList></div>
<script>
let bno = 1066;
let showList = function(bno){
$.ajax({
type:'GET', // 요청 메서드
url: '/comments?bno='+bno, // 요청 URI
success : function(result){
$("#commentList").html(toHtml(result)); // 서버로부터 응답이 도착하면 호출될 함수
},
error : function(){ alert("error") } // 에러가 발생했을 때, 호출될 함수
}); // $.ajax()
}
$(document).ready(function(){
$("#sendBtn").click(function(){
showList(bno);
});
});
let toHtml = function(comments) {
let tmp = "<ul>";
comments.forEach(function(comment) {
tmp += '<li data-cno=' + comment.cno
tmp += ' data-pcno=' + comment.pcno
tmp += ' data-bno=' + comment.bno + '>'
tmp += ' commenter=<span class="commenter">' + comment.commenter + '</span>'
tmp += ' comment=<span class="comment">' + comment.comment + '</span>'
tmp += ' up_date=' + comment.up_date
tmp += '</li>'
})
return tmp + "</ul>";
}
</script>
</body>
</html>
삭제 기능 만들기
요청이 와야 삭제 버튼이 만들어 지는데 요청이 오기 전에 삭제 버튼 코드가 실행되니 삭제 버튼을 눌러도 창이 나타나질 않는다. 그래서 이벤트를 고정된 요소인 $("#commentList") 에 건다.
tmp += '<button class="delBtn">삭제</button>' // $("#.delBtn").click(function()
$("#commentList").on("click", ".delBtn", function(){
alert("delBtn clicked");
});
});<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
<h2>commentTest</h2>
<button id="sendBtn" type="button">SEND</button>
<div id=commentList></div>
<script>
let bno = 1066;
let showList = function(bno){
$.ajax({
type:'GET', // 요청 메서드
url: '/comments?bno='+bno, // 요청 URI
success : function(result){
$("#commentList").html(toHtml(result)); // 서버로부터 응답이 도착하면 호출될 함수
},
error : function(){ alert("error") } // 에러가 발생했을 때, 호출될 함수
}); // $.ajax()
}
$(document).ready(function(){
$("#sendBtn").click(function(){
showList(bno);
});
// $("#.delBtn").click(function()
$("#commentList").on("click", ".delBtn", function(){
alert("delBtn clicked");
});
});
let toHtml = function(comments) {
let tmp = "<ul>";
comments.forEach(function(comment) {
tmp += '<li data-cno=' + comment.cno
tmp += ' data-pcno=' + comment.pcno
tmp += ' data-bno=' + comment.bno + '>'
tmp += ' commenter=<span class="commenter">' + comment.commenter + '</span>'
tmp += ' comment=<span class="comment">' + comment.comment + '</span>'
tmp += ' up_date=' + comment.up_date
tmp += '<button class="delBtn">삭제</button>'
tmp += '</li>'
})
return tmp + "</ul>";
}
</script>
</body>
</html>
삭제 테스트
// $("#.delBtn").click(function()
$("#commentList").on("click", ".delBtn", function(){
let cno = $(this).parent().attr("data-cno");
let bno = $(this).parent().attr("data-bno");
$.ajax({
type:'DELETE', // 요청 메서드
url: '/comments/'+cno+'?bno='+bno, // 요청 URI
success : function(result){
alert(result)
showList(bno);
},
error : function(){ alert("error") } // 에러가 발생했을 때, 호출될 함수
}); // $.ajax()
});<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
<h2>commentTest</h2>
<button id="sendBtn" type="button">SEND</button>
<div id=commentList></div>
<script>
let bno = 1066;
let showList = function(bno){
$.ajax({
type:'GET', // 요청 메서드
url: '/comments?bno='+bno, // 요청 URI
success : function(result){
$("#commentList").html(toHtml(result)); // 서버로부터 응답이 도착하면 호출될 함수
},
error : function(){ alert("error") } // 에러가 발생했을 때, 호출될 함수
}); // $.ajax()
}
$(document).ready(function(){
$("#sendBtn").click(function(){
showList(bno);
});
// $("#.delBtn").click(function()
$("#commentList").on("click", ".delBtn", function(){
let cno = $(this).parent().attr("data-cno");
let bno = $(this).parent().attr("data-bno");
$.ajax({
type:'DELETE', // 요청 메서드
url: '/comments/'+cno+'?bno='+bno, // 요청 URI
success : function(result){
alert(result)
showList(bno);
},
error : function(){ alert("error") } // 에러가 발생했을 때, 호출될 함수
}); // $.ajax()
});
});
let toHtml = function(comments) {
let tmp = "<ul>";
comments.forEach(function(comment) {
tmp += '<li data-cno=' + comment.cno
tmp += ' data-pcno=' + comment.pcno
tmp += ' data-bno=' + comment.bno + '>'
tmp += ' commenter=<span class="commenter">' + comment.commenter + '</span>'
tmp += ' comment=<span class="comment">' + comment.comment + '</span>'
tmp += ' up_date=' + comment.up_date
tmp += '<button class="delBtn">삭제</button>'
tmp += '</li>'
})
return tmp + "</ul>";
}
</script>
</body>
</html>
쓰기 기능 추가
comment: <input type="text" name="comment"><br> $("#sendBtn").click(function(){
let comment = $("input[name=comment]").val();
$.ajax({
type:'POST', // 요청 메서드
url: '/comments?bno='+bno, // 요청 URI /comments?bno=1081
headers : { "content-type": "application/json"}, // 요청 헤더
data : JSON.stringify({bno:bno, comment:comment}), // 서버로 전송할 데이터. stringify()로 직렬화 필요.
success : function(result){
alert(result);
showList(bno);
},
error : function(){ alert("error") } // 에러가 발생했을 때, 호출될 함수
}); // $.ajax()
});<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
<h2>commentTest</h2>
comment: <input type="text" name="comment"><br>
<button id="sendBtn" type="button">SEND</button>
<div id=commentList></div>
<script>
let bno = 1066;
let showList = function(bno){
$.ajax({
type:'GET', // 요청 메서드
url: '/comments?bno='+bno, // 요청 URI
success : function(result){
$("#commentList").html(toHtml(result)); // 서버로부터 응답이 도착하면 호출될 함수
},
error : function(){ alert("error") } // 에러가 발생했을 때, 호출될 함수
}); // $.ajax()
}
$(document).ready(function(){
$("#sendBtn").click(function(){
let comment = $("input[name=comment]").val();
$.ajax({
type:'POST', // 요청 메서드
url: '/comments?bno='+bno, // 요청 URI /comments?bno=1081
headers : { "content-type": "application/json"}, // 요청 헤더
data : JSON.stringify({bno:bno, comment:comment}), // 서버로 전송할 데이터. stringify()로 직렬화 필요.
success : function(result){
alert(result);
showList(bno);
},
error : function(){ alert("error") } // 에러가 발생했을 때, 호출될 함수
}); // $.ajax()
});
// $("#.delBtn").click(function(){}
$("#commentList").on("click", ".delBtn", function(){
let cno = $(this).parent().attr("data-cno");
let bno = $(this).parent().attr("data-bno");
$.ajax({
type:'DELETE', // 요청 메서드
url: '/comments/'+cno+'?bno='+bno, // 요청 URI
success : function(result){
alert(result)
showList(bno);
},
error : function(){ alert("error") } // 에러가 발생했을 때, 호출될 함수
}); // $.ajax()
});
});
let toHtml = function(comments) {
let tmp = "<ul>";
comments.forEach(function(comment) {
tmp += '<li data-cno=' + comment.cno
tmp += ' data-pcno=' + comment.pcno
tmp += ' data-bno=' + comment.bno + '>'
tmp += ' commenter=<span class="commenter">' + comment.commenter + '</span>'
tmp += ' comment=<span class="comment">' + comment.comment + '</span>'
tmp += ' up_date=' + comment.up_date
tmp += '<button class="delBtn">삭제</button>'
tmp += '</li>'
})
return tmp + "</ul>";
}
</script>
</body>
</html>
수정 기능 추가
댓글 옆에 수정 버튼을 누르면 input 아래에 수정 버튼에 data-cno 값이 넘어가게 함
<button id="modBtn" type="button">수정</button> tmp += '<button class="modBtn">수정</button>' $("#commentList").on("click", ".modBtn", function(){ // . 은 클래스를 지칭함
let cno = $(this).parent().attr("data-cno");
let comment = $("span.comment", $(this).parent()).text();
// 1. commnet 의 내용을 input 에 넣어주기
$("input[name=comment]").val(comment);
// 2. cno 전달하기
$("#modBtn").attr("data-cno", cno); // # 은 id를 지칭함
});
input 밑에 수정 버튼
$("#modBtn").click(function(){
let cno = $(this).attr("data-cno");
let comment = $("input[name=comment]").val();
if(comment.trim()==''){
alert("댓글을 입력해주세요.");
$("input[name=comment]").focus()
return;
}
$.ajax({
type:'PATCH', // 요청 메서드
url: '/comments/'+cno, // 요청 URI /comments/{cno}
headers : { "content-type": "application/json"}, // 요청 헤더
data : JSON.stringify({cno:cno, comment:comment}), // 서버로 전송할 데이터. stringify()로 직렬화 필요.
success : function(result){
alert(result);
showList(bno);
},
error : function(){ alert("error") } // 에러가 발생했을 때, 호출될 함수
}); // $.ajax()
});<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
<h2>commentTest</h2>
comment: <input type="text" name="comment"><br>
<button id="sendBtn" type="button">SEND</button>
<button id="modBtn" type="button">수정</button>
<div id=commentList></div>
<script>
let bno = 1066;
let showList = function(bno){
$.ajax({
type:'GET', // 요청 메서드
url: '/comments?bno='+bno, // 요청 URI
success : function(result){
$("#commentList").html(toHtml(result)); // 서버로부터 응답이 도착하면 호출될 함수
},
error : function(){ alert("error") } // 에러가 발생했을 때, 호출될 함수
}); // $.ajax()
}
$(document).ready(function(){
showList(bno);
$("#sendBtn").click(function(){
let comment = $("input[name=comment]").val();
if(comment.trim()==''){
alert("댓글을 입력해주세요.");
$("input[name=comment]").focus()
return;
}
$.ajax({
type:'POST', // 요청 메서드
url: '/comments?bno='+bno, // 요청 URI /comments?bno=1081
headers : { "content-type": "application/json"}, // 요청 헤더
data : JSON.stringify({bno:bno, comment:comment}), // 서버로 전송할 데이터. stringify()로 직렬화 필요.
success : function(result){
alert(result);
showList(bno);
},
error : function(){ alert("error") } // 에러가 발생했을 때, 호출될 함수
}); // $.ajax()
});
$("#modBtn").click(function(){
let cno = $(this).attr("data-cno");
let comment = $("input[name=comment]").val();
if(comment.trim()==''){
alert("댓글을 입력해주세요.");
$("input[name=comment]").focus()
return;
}
$.ajax({
type:'PATCH', // 요청 메서드
url: '/comments/'+cno, // 요청 URI /comments/{cno}
headers : { "content-type": "application/json"}, // 요청 헤더
data : JSON.stringify({cno:cno, comment:comment}), // 서버로 전송할 데이터. stringify()로 직렬화 필요.
success : function(result){
alert(result);
showList(bno);
},
error : function(){ alert("error") } // 에러가 발생했을 때, 호출될 함수
}); // $.ajax()
});
$("#commentList").on("click", ".modBtn", function(){ // . 은 클래스를 지칭함
let cno = $(this).parent().attr("data-cno");
let comment = $("span.comment", $(this).parent()).text();
// 1. commnet 의 내용을 input 에 넣어주기
$("input[name=comment]").val(comment);
// 2. cno 전달하기
$("#modBtn").attr("data-cno", cno); // # 은 id를 지칭함
});
// $("#.delBtn").click(function(){}
$("#commentList").on("click", ".delBtn", function(){
let cno = $(this).parent().attr("data-cno");
let bno = $(this).parent().attr("data-bno");
$.ajax({
type:'DELETE', // 요청 메서드
url: '/comments/'+cno+'?bno='+bno, // 요청 URI
success : function(result){
alert(result)
showList(bno);
},
error : function(){ alert("error") } // 에러가 발생했을 때, 호출될 함수
}); // $.ajax()
});
});
let toHtml = function(comments) {
let tmp = "<ul>";
comments.forEach(function(comment) {
tmp += '<li data-cno=' + comment.cno
tmp += ' data-pcno=' + comment.pcno
tmp += ' data-bno=' + comment.bno + '>'
tmp += ' commenter=<span class="commenter">' + comment.commenter + '</span>'
tmp += ' comment=<span class="comment">' + comment.comment + '</span>'
tmp += ' up_date=' + comment.up_date
tmp += '<button class="delBtn">삭제</button>'
tmp += '<button class="modBtn">수정</button>'
tmp += '</li>'
})
return tmp + "</ul>";
}
</script>
</body>
</html>
'프로젝트 > 중고헌터' 카테고리의 다른 글
| 중고헌터 - 댓글 기능 구현 5 - 댓글 테스트 (0) | 2022.10.28 |
|---|---|
| 중고헌터 - 댓글 기능 구현 4 - 대댓글 (0) | 2022.10.10 |
| 중고헌터 - 댓글 기능 구현 2 - Controller 작성 (0) | 2022.10.09 |
| 중고헌터 - 댓글 기능 구현 1 - DAO와 Service의 작성 (0) | 2022.10.08 |
| 중고헌터 - REST API와 Ajax (0) | 2022.10.08 |