프로그래밍/스프링 & 스프링 부트
스프링 jQuery로 게시판 글쓰기 만들기
밍구몬
2019. 5. 13. 14:14
https://ming9mon.tistory.com/65
스프링 게시판 만들기1
1. DB 입력 우선 게시판을 만들기 앞서 게시판에 필요한 테이블을 만들어 준다. DB는 Mariadb를 이용하였다. CREATE TABLE boardtest( idx int AUTO_INCREMENT PRIMARY KEY, writer VARCHAR(20) NOT NULL, title V..
ming9mon.tistory.com
앞에 만들었던 게시판에서 그냥 form데이터를 전송시키는 것이 아닌 jQuery로 데이터 값을 검사하고 전송하도록 변경하겠다.
앞에 만들었던 insertBoard.jsp는 submit버튼으로 데이터를 전송하였었다.
여기에 jQuery를 추가하여 전송하는 방법으로 변경하겠다.
jsp
<h1>글 쓰기</h1>
<hr>
<form id="frm" name="frm" action="insertBoard.do" method="post">
<table border="1">
<tr>
<td bgcolor="orange" width="70">제목</td>
<td align="left">
<input type="text" id="title" name="title" />
</td>
</tr>
<tr>
<td bgcolor="orange">작성자</td>
<td align="left">
<input type="text" id="writer" name="writer" size="10" />
</td>
</tr>
<tr>
<td bgcolor="orange">내용</td>
<td align="left">
<textarea id="content" name="content" cols="40" rows="10"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="button" name="write" id="write" >쓰기</button>
</td>
</tr>
</table>
</form>일단 form에 id를 추가해 주고 쓰기 버튼을 <input type="submit">이 아닌 button으로 변경하였고 id를 write로 지정해 주었다 input type은 button으로 해도 상관없지만 그냥 button으로 만들었다.
스크립트
<script type="text/javascript">
$(document).ready(function (e){
$('#write').click(function(){
var frmArr = ["title","writer","content"];
//입력 값 널 체크
for(var i=0;i<frmArr.length;i++){
//alert(arr[i]);
if($.trim($('#'+frmArr[i]).val()) == ''){
alert('빈 칸을 모두 입력해 주세요.');
$('#'+frmArr[i]).focus();
return false;
}
}
//전송
$('#frm').submit();
});
});
</script>페이지가 준비되었을 때, write 버튼을 누르면 이벤트가 동작하도록 하였다.
frmArr에 form의 항목을 미리 입력하여 for문으로 입력 값이 null인지 체크하였다.
trim으로 공백을 제거하고 입력 값이 없다면 빈 칸에 포커스를 맞추고 false를 반환하였다.
그리고 입력값이 모두 입력되었을때 $('#frm').submit(); 으로 form의 내용을 action이 저장한 곳으로 submit하도록 만들어 주었다.
전체소스보기
...더보기
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>새글등록</title>
<script src="resources/jQuery/jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>글 쓰기</h1>
<hr>
<form id="frm" name="frm" action="insertBoard.do" method="post">
<table border="1">
<tr>
<td bgcolor="orange" width="70">제목</td>
<td align="left">
<input type="text" id="title" name="title" />
</td>
</tr>
<tr>
<td bgcolor="orange">작성자</td>
<td align="left">
<input type="text" id="writer" name="writer" size="10" />
</td>
</tr>
<tr>
<td bgcolor="orange">내용</td>
<td align="left">
<textarea id="content" name="content" cols="40" rows="10"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="button" name="write" id="write" >쓰기</button>
</td>
</tr>
</table>
</form>
<hr>
<a href="getBoardList.do">글 목록 가기</a>
</body>
<script type="text/javascript">
$(document).ready(function (e){
$('#write').click(function(){
var frmArr = ["title","writer","content"];
//입력 값 널 체크
for(var i=0;i<frmArr.length;i++){
//alert(arr[i]);
if($.trim($('#'+frmArr[i]).val()) == ''){
alert('빈 칸을 모두 입력해 주세요.');
$('#'+frmArr[i]).focus();
return false;
}
}
//전송
$('#frm').submit();
});
});
</script>
</html>
수정하기도 이와 같이 조금만 수정해 주면 된다.
content.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글 상세</title>
<script src="resources/jQuery/jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>글 상세</h1>
<hr>
<form id="frm" action="updateBoard.do" method="post">
<input name="seq" type="hidden" value="${board.idx}" />
<table border="1">
<tr>
<td bgcolor="orange" width="70">제목</td>
<td align="left"><input id="title" name="title" type="text"
value="${board.title }" /></td>
</tr>
<tr>
<td bgcolor="orange">작성자</td>
<td align="left">${board.writer }</td>
</tr>
<tr>
<td bgcolor="orange">내용</td>
<td align="left"><textarea id="content" name="content" cols="40" rows="10">${board.content }</textarea></td>
</tr>
<tr>
<td bgcolor="orange">등록일</td>
<td align="left"><fmt:formatDate value="${board.regDate }" pattern="yyyy-MM-dd"/></td>
</tr>
<tr>
<td bgcolor="orange">조회수</td>
<td align="left">${board.cnt }</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" id="modify" value="글 수정" /></td>
</tr>
</table>
</form>
<hr>
<a href="writeBoard.do">글 쓰기</a>
<a href="deleteBoard.do?idx=${board.idx }">글 삭제</a>
<a href="getBoardList.do">글 목록</a>
</body>
<script type="text/javascript">
$(document).ready(function (e){
$('#modify').click(function(){
var frmArr = ["title","content"];
//입력 값 널 체크
for(var i=0;i<frmArr.length;i++){
//alert(arr[i]);
if($.trim($('#'+frmArr[i]).val()) == ''){
alert('빈 칸을 모두 입력해 주세요. -'+frmArr[i]);
$('#'+frmArr[i]).focus();
return false;
}
}
//전송
$('#frm').submit();
});
});
</script>
</html>