현재 버전

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 변화 없이 삭제 시킬 수 있을까요 ㅠㅠ?


수정 이력

2017-05-15 11:37:58 에 아래 내용에서 변경 됨 #1

-controller-

@Controller
public class CommentController {
	
	public static final String VIEW_PATH="/WEB-INF/views/comment/";
	
	CommentDao dao;
	
	@Autowired
	HttpServletRequest request;
	
	@Autowired
	HttpSession session;
	
	public CommentController() {
		// TODO Auto-generated constructor stub
	}

	public CommentController(CommentDao dao) {
		super();
		this.dao = dao;
	}
	@RequestMapping("/comment_list.do")
	public String comment_list(){
		int b_idx = Integer.parseInt(request.getParameter("b_idx"));
		List<CommentVo> list 
			 = dao.selectList(b_idx);
				
		request.setAttribute("list", list);
		return VIEW_PATH+"comment_list.jsp";
	}

       @RequestMapping("/comment_insert.do")
	public String comment_insert(CommentVo vo,BoardVo b_vo){
		
		int b_idx = Integer.parseInt(request.getParameter("b_idx"));
		
		String comment_content = vo.getComment_content();
		comment_content = comment_content.replaceAll("\r\n", "<br>");
		vo.setComment_content(comment_content);
		
		int res = dao.insert(vo);
		List<CommentVo> list=dao.selectList(b_idx);
		
		request.setAttribute("list", list);
		
		return VIEW_PATH + "comment_list.jsp";
	}
	
	@RequestMapping("/comment_delete.do")
	public String comment_delete(CommentVo vo){
		int b_idx = Integer.parseInt(request.getParameter("b_idx"));
		int res = dao.delete(vo.getC_idx());
		List<CommentVo> list = dao.selectList(b_idx);
		
		request.setAttribute("list", list);
		return VIEW_PATH + "comment_list.jsp";
	}
}


-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 변화 없이 삭제 시킬 수 있을까요 ㅠㅠ?