ajax 기본 (3) -댓글쓰기

	<p>
		<button type="button" onclick="location.href='/product/list'"  class="btn btn-primary" >전체목록</button>
	</p>
	<form name="form1" method="post" enctype="multipart/form-data">
		<table class="table" >
			<tr  class="table-success">
				<td>상품명</td>
				<td><input type="text" name="product_name" value="${product.product_name}" > </td>
			</tr>
			
			<tr class="table-primary">
				<td>상품가격</td>
				<td><input type="number" name="price" value="${product.price}"> </td>
			</tr>
			
			<tr class="table-warning">
				<td>상품설명</td>
				<td><textarea rows="5" cols="60" name="description">${product.description}</textarea> </td>
			</tr>
			<tr class="table-danger">
				<td>상품사진</td>
				<td>
					<c:if test="${product.filename != '-'}">
						<img src="/storage/${product.filename}" width="100px">
					</c:if>
					<br>
					<input type="file" name="img">
				</td>
			</tr>
			<tr class="table-secondary">
				<td colspan="2" align="center">
					<input type="hidden" name="product_code" value=${product.product_code}>
					<input type="hidden" name="filename" value=${product.filename}>
					<input type="button" value="상품수정" class="btn btn-success" onclick="product_update()">
					<input type="button" value="상품삭제" class="btn btn-primary" onclick="product_delete()">
					
				</td>
			</tr>	
		</table>
	</form>
	
	<hr>
	<!-- 댓글 -->
	<div class="container">
		<label for="content">댓글</label>
		<form name="commentInsertForm" id="commentInsertForm">
			<div>
				<input type="hidden" name="product_code" id="product_code" value="${product.product_code}">
				<input type="text" name="content" id="content" placeholder="내용을 입력해주세요">
				<input type="text" name="wname" id="wname" placeholder="작성자" style="width:100px;">
				<button type="button" name="commentInsertBtn" id="commentInsertBtn" class="btn btn-primary" >등록</button>
			</div>
		</form>
	</div>
	<hr>
 	<div class="container">
		<div class="commentList">
		</div>
	</div>

 

 

1. 버튼에 click이벤트 걸고 form에 serialize 걸기

let product_code='${product.product_code}';
	
$("#commentInsertBtn").click(function(){
		//alert($);
		let insertData=$("#commentInsertForm").serialize();
		//alert(insertData);
		commentInsert(insertData);
});

 

 

2.commentInsert로 controller와 연결(DB연결단생략)

function commentInsert(insertData){
			$.ajax({
					url:'/comment/insert'
					,type:'post'
					,data:insertData
					,error:function(error){
						alert(error);
					}
					,success:function(data){
						//alert(data);
						if(data==1){
							commentList();
							$('#content').val('');
							$('#wname').val('');
						}
					}
			});
}//commentInsertend

 

3.commenLIst로 댓글 보여주기 (댓글계속 보여주기 위해 document로드시 commentList호출)

function commentList(){
			$.ajax({
					url:'/comment/list'
					,type:'get'
					,data:{'product_code':product_code}
					,success:function(data){
						let a='';
						$.each(data,function(key,value){
				    		
				    		a += '<div class="commentArea" style="border-bottom:1px solid darkgray; margin-bottom:15px;">'
				    		a += '     <div class="commentInfo' + value.cno + '">';
				    		a += '          댓글번호:' + value.cno + ' / 작성자:' + value.wname + " " + value.regdate;			    		
				    		a += '          <a href="javascript:commentUpdate(' + value.cno + ',\'' + value.content + '\')">[수정]</a>';
				    		a += '          <a href="javascript:commentDelete(' + value.cno + ')">[삭제]</a>';
				    		a += '     </div>';
				    		a += '     <div class="commentContent' + value.cno + '">';			    		
				    		a += '          <p>내용:' + value.content + "</p>";
				    		a += '     </div>';			    		
				    		a += '</div>';
						});
						
						$(".commentList").html(a);
					}
				
			});//ajax end
		}//commentList end
        
        
   $(document).ready(function(){
			commentList();
		})

 

4.댓글 수정과 삭제

//댓글수정 - 댓글 내용 출력을 input 폼으로 변경
		function commentUpdate(cno, content) {
			//alert(cno + content);
			let a='';
			a += '<div class="input-group">';
			a += '    <input type="text" value="' + content + '" id="content_' + cno + '">';
			a += '    <button type="button" onclick="commentUpdateProc(' + cno + ')">수정</button>';
			a += '</div>';
			//alert(a);
			$(".commentContent" + cno).html(a);
		}//commentUpdate() end
		
		//댓글수정
		function commentUpdateProc(cno) {
			//alert("댓글수정"+cno);
			let updateContent=$('#content_' + cno).val();
			//alert(updateContent);
			
			$.ajax({
				  url:'/comment/update'
				, type:'post'
				, data:{'cno':cno, 'content':updateContent}
			    , success:function(data){
			    	if(data==1){
			    		commentList(); //댓글 수정후 목록 출력
			    	}//if end
			    }//if end
			 });//ajax() end
			
		}//commentUpdateProc() end
		
		
		
		//댓글삭제
		function commentDelete(cno) {
			//alert("댓글삭제" + cno);
			$.ajax({
				  url:'/comment/delete/' + cno
				, type:'post'
				, success:function(data){ //콜백함수
					//alert(data);
					if(data==1){
						alert("댓글이 삭제되었습니다");
						commentList(); //댓글 삭제후 목록 출력
					}//if end
				}//success end
			});//ajax() end
		}//commentDelete() end
		
		$(document).ready(function(){
			commentList();
		})