너무어려웡
502
2017-05-15 03:27:20 작성 2017-05-15 11:37:58 수정됨
4
843

ajax 이용한 댓글 삭제 관련 질문입니다 ㅠㅠ


-board_view.jsp-

<b_idx는 게시글 번호 입니다.>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="${ pageContext.request.contextPath }/resources/js/httpRequest.js"></script>
<script>
	function delete_check(){
		if(confirm("정말 삭제 하시겠습니까?")){
			location.href = "board_delete.do?b_idx="+${param.b_idx};
		}else{
			return;
		}
	}
	
	window.onload=function()
	{
		load_comment();
	};
	
	function load_comment()
	{
		var url = "comment_list.do";
		var param="b_idx=${ param.b_idx }";
		sendRequest(url, param, resultFn, "GET");
	}
	
	function resultFn()
	{
		if(xhr.readyState==4 && xhr.status==200)
		{
			var data = xhr.responseText;
			document.getElementById("disp").innerHTML = data;
		}
	}
	
	function send_comment()
	{
		var comment_content = document.getElementById("comment_content").value.trim();
		if(comment_content==""){
			alert("댓글 내용을 입력하세요!");
			return;
		}

		var url = "comment_insert.do";
		var param =  "b_idx=${param.b_idx}&comment_content=" + encodeURIComponent(comment_content);
		sendRequest(url, param, resultFn, "GET");
		document.getElementById("comment_content").value="";
		
	}
	
	function comment_delete(f){
		var c_idx=f.c_idx.value;
		var url = "comment_delete.do";
		var param =  "b_idx=${param.b_idx}&c_idx="+c_idx;
		sendRequest(url, param, resultFn, "GET");
	}
	
</script>
</head>
<body>
<table id="notice" style="border: medium;">
 <tr>
  <td>
   <div id="disp"></div>
  </td>
 </tr>
				
 <tr>
  <td>
   <textarea id="comment_content"></textarea>
   <button onclick="send_comment();">등록</button>
  </td>
 </tr>
</table>

</body>
</html>


-comment_list.jsp-

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

<c:forEach var="vo"  items="${ list }">
	<form>
   <input id="b_idx" name="b_idx" type="hidden" value="${vo.b_c_idx}">
   <input id="c_idx" name="c_idx" type="hidden" value="${vo.c_idx}">
   <table>
	   <tr>
	   	<td>${ vo.nick }</td>
	   	<td> ${ vo.comment_content }</td>
	   	<td>
	   	  <button onclick="comment_delete(this.form);">삭제</button><br>
	   	</td>
	   </tr>
   </table>
   </form>
</c:forEach>

</body>
</html>


-httpRequest.js-

var xhr = null;

function createRequest(){
	if(xhr!=null)return;
	if(window.ActiveXObject)
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	else
		xhr = new XMLHttpRequest();
}


function sendRequest(url, param, callBack, method){
	createRequest();
	var httpMethod = 
	(method!='POST' && method!='post')?'GET':'POST';
	
	var httpParam = 
	(param==null || param == '')?null:param;
	
	var httpURL = url;
	
	if(httpMethod == 'GET' && httpParam != null)
		httpURL = httpURL+"?"+httpParam;
	
	xhr.open(httpMethod, httpURL, true);
	xhr.setRequestHeader("Content-Type",
	  "application/x-www-form-urlencoded");
	xhr.onreadystatechange = callBack;
	
	xhr.send(httpMethod == 'POST'?httpParam:null);
}


현재 소스는 이런데요

입력의 경우는 이상 없이 잘 되는데 삭제의 경우 댓글이 삭제가 되기는 합니다.

그런데 url이 원래

http://localhost:9090/board_view.do?b_idx=164&page=1&search=&search_text=

이상태였다면 삭제 후에는

http://localhost:9090/atct/board_view.do?b_idx=164&c_idx=160

이렇게 url 바뀌는데 왜 이런지 이해가 잘 안되네요ㅠㅠ..

댓글 입력시에는 url 바뀌는거 없이 원래 url에서 댓글이 추가만 되는데 삭제는 왜 이러는지요 ㅠㅠ

어떻게 해야 url 변화 없이 삭제 시킬 수 있을까요 ㅠㅠ?

0
0
  • 답변 4

  •  (づ。◕ ܫ ◕。)づ
    4k
    2017-05-15 09:27:16
    <button type="button" onclick="comment_delete(this.form);">삭제</button><br>
    0
  • 너무어려웡
    502
    2017-05-15 11:37:43 작성 2017-05-15 11:58:19 수정됨

    헐 ㅠㅠ 대박 감사합니다!

    그런데 type 유무 뭔 차이인지 알 수 있을까요...?

    0
  •  (づ。◕ ܫ ◕。)づ
    4k
    2017-05-15 11:49:24

    <button>은 <input type="submit">을 대체할 수 있는 태그인데

    type이 지정되지 않을 경우 브라우저마다 기본값이 정해져있는 듯 보입니다.

    그래서 반드시 type 속성을 button으로 지정하셔야 합니다.


    0
  • 너무어려웡
    502
    2017-05-15 11:58:40

    아하 정말 감사합니다!ㅠ

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.