잡동사니에도 사랑을

[21.11.01] 본문

JAVA_EE/MVC+JQuery+Mybatis

[21.11.01]

luvforjunk 2021. 11. 1. 11:15
728x90
반응형

1) 작성자에게만 글수정, 글삭제버튼이 보이도록

 

 

////////GetBoardViewService.java

 

 

 

////////boardView.jsp

 

 

////////command.properties

 

 

 

////////command.properties

 

 

 

////////BoardModifyService.java

 

 

 

////////BoardModifyFormService.java

 

 

 

////////boardMapper.xml

 

 

 

////////boardModify.jsp

 

 

 

///////boardModifyForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<style type="text/css">
#boardModifyForm div {
	color: red;
	font-size: 8pt;
	font-weight: bold;
}
</style>

<h3>글수정</h3>
<form id="boardModifyForm">
	<input type="hidden" name="seq" id="seq" value="${requestScope.seq }">
	<input type="hidden" name="pg" id="pg" value="${pg }">

	<table cellspacing="0" border="1" cellpadding="5">
		<tr>
			<td width="50" align="center">제목</td>
			<td><input type="text" name="subject" id="subject" 
				style="width: 350px;">
				<div id="subjectDiv"></div></td>
		</tr>
		<tr>
			<td width="50" align="center">내용</td>
			<td><textarea name="content" id="content" cols="50" rows="15"></textarea>
				<div id="contentDiv"></div></td>
		</tr>
		<tr>
			<td colspan="2" align="center"><input type="button"
				id="boardModifyBtn" value="글수정"> <input type="reset"
				value="다시작성"></td>
		</tr>
	</table>
</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		$.ajax({
			url : '/MQBProject/board/getBoardView.do',
			type : 'post',
			data : {'seq' : $('#seq').val()},
			dataType : 'json',
			success : function(data) {
				console.log(JSON.stringify(data));

				$('#subject').val(data.subject); // 여기서 subject는 input이니까 val걸어주기
				$('#content').val(data.content);
			},
			error : function(err) {
				console.log(err);
			}
		});
	});

	$('#boardModifyBtn').click(function() {
		//초기화 과정
		$('#subjectDiv').empty();
		$('#contentDiv').empty();
		
		if($('#subject').val() == '') {
			$('#subjectDiv').html('제목 입력'); 
			$('#subject').focus();
		}
		else if($('#content').val() == ''){
			$('#contentDiv').html('내용 입력');
			$('#content').focus();
		}
		else{
			$.ajax({
				url : '/MQBProject/board/boardModify.do',
				type : 'post',
				data : $('#boardModifyForm').serialize(),
				success : function(){
					alert("글수정 완료");
					location.href='/MQBProject/board/boardList.do?pg='+$('#pg').val();
				},
				error : function(err){
					console.log(err);
				}			
			});
		}
	});
</script>

 

 

 

////////boardView.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="board.bean.BoardDTO"%>
<%@ page import="board.dao.BoardDAO"%>

<form id="boardViewForm">
	<!-- post방식으로 넘겨주기 위해 -->
	<input type="hidden" name="seq" id="seq" value="${requestScope.seq }">
	<input type="hidden" name="pg" id="pg" value="${pg }">

	<table border="1" cellspacing="0" cellpadding="5" frame="hsides" rules="rows">
		<tr>	
			<td colspan="3">
				<h3><span id="subjectSpan"></span></h3>
			</td> 
			<!-- 내가 잡은 글자만큼 크기를 잡아주려 <span>태그를 쓴다 -->
		</tr>

		<tr>
			<td width="150">글번호 : <span id="seqSpan"></span></td>
			<td width="150">작성자 : <span id="idSpan"></span></td>
			<td width="150">조회수 : <span id="hitSpan"></span></td>
		</tr>

		<tr>
			<td colspan="3" height="200" valign="top">
			<pre><span id="contentSpan"></span></pre></td>
		</tr>
	</table>

	<input type="button" id="boardListBtn" value="목록"
		onclick="location.href='/MQBProject/board/boardList.do?pg=${pg}'">

	<span id="boardViewSpan"> <!-- 글수정, 글삭제만 묶어준다 --> 
		<input type="button" value="글수정" onclick="mode(1)"> <!--함수는 맘대로 설정해둬도 상관없다  -->
		<input type="button" value="글삭제" onclick="mode(2)">
	</span> 
		<input type="button" value="답글">
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		$.ajax({
			url : '/MQBProject/board/getBoardView.do',
			type : 'post',
			data : {'seq' : $('#seq').val()},
			dataType : 'json',
			success : function(data) {
				console.log(JSON.stringify(data));

				$('#subjectSpan').text(data.subject);
				$('#seqSpan').text(data.seq);
				$('#idSpan').text(data.id);
				$('#hitSpan').text(data.hit);
				$('#contentSpan').text(data.content);

				// 작성한 사람만이 글수정, 글삭제 보이도록
				if (data.memId == data.id)
					$('#boardViewSpan').show();
				else
					$('#boardViewSpan').hide();
			},
			error : function(err) {
				console.log(err);
			}
		});
	});
</script>

<script type="text/javascript">
	function mode(num) {
		if (num == 1) {
			document.getElementById("boardViewForm").method = 'post';
			document.getElementById("boardViewForm").action = '/MQBProject/board/boardModifyForm.do';
			document.getElementById("boardViewForm").submit();
			// submit으로 넘어갈 수 있는 건 아이디 속성이 아닌 name속성이다.
		} else if (num == 2) {

		}
	}
</script>

 

 

 

////////boardList.js

728x90
반응형

'JAVA_EE > MVC+JQuery+Mybatis' 카테고리의 다른 글

[21.11.02] 게시판 답글  (0) 2021.11.02
[21.11.01]  (0) 2021.11.01
[21.10.28] 글쓰기와 목록(  (0) 2021.10.28
[21.10.27] 우편번호 검색 및 글쓰기(JSTL 정의)  (0) 2021.10.27
[21.10.26] MQBProject  (0) 2021.10.26