게시판 만들기
.
..
.
.
.
.
.
.
.
.
.
.
여러 단계 이후,,,,
게시판 내용까지 한번에 보기
- main
<body>
<div class="container">
<h2>Spring MVC 02</h2>
<div class="panel panel-warning">
<div class="panel-heading">Board List Page</div>
<div class="panel-body" id = "list">
<table class="table table-bordered table-hover">
<tr class="warning">
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>조회수</td>
<td>날짜</td>
</tr>
<tbody id = "view">
</tbody>
</table>
<a class="btn btn-primary" href="javascript:goForm()">글쓰기</a>
</div>
<div class = "panel-body" id = "wform" style = "display: none;">
<form id ="frm">
<table class = "table table-bordered table-hover">
<tr>
<td>제목</td>
<td><input name = "title" type = "text" class="form-control" placeholder="제목을 입력하세요"></td>
</tr>
<tr>
<td>내용</td>
<td><textarea name = "contents" rows = "7" class="form-control" cols="" placeholder = "내용을 입력하세요"></textarea></td>
</tr>
<tr>
<td>작성자</td>
<td><input name = "writer" type ="text" class = "form-cotrol" placeholder="작성자를 입력하세요"></td>
</tr>
<tr>
<td colspan = "2" align="center">
<a href ="javascript:goList()"><button type = "button" class = "btn btn-info">돌아가기</button></a>
<button id = "fclear" type = "reset" class = "btn btn-danger">취소</button>
<button onclick="goInsert()" type="button" class = "btn btn-warning">작성</button>
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</form>
</div>
<div class="panel-footer">LG DX - 박병관</div>
</div>
</div>
<script type="text/javascript">
loadList();
// 게시글 전체 불러오기 기능
function loadList() {
// 비동기 통신 - ajax
$.ajax({
url : "boardList.do",
type : "get",
dataType : "json",
success : makeView,
error : function() {
alert("error...");
}
});
}
function makeView(data) {
console.log(data);
let html = "";
for(let i =0; i<data.length; i++){
html += "<tr>";
html += "<td>" + data[i].idx + "</td>";
html += "<td>" + data[i].title + "</td>";
html += "<td>" + data[i].writer + "</td>";
html += "<td>" + data[i].count + "</td>";
html += "<td>" + data[i].indate + "</td>";
html += "<tr>";
// 상세내용
html += "<tr>";
html += "<td>내용</td>"
html += "<td colspan = '4'>";
html += "<textarea readonly rows = '7' class='form-control'>";
html += data[i].contents;
html += "</textarea>"
html += "</td>"
html += "</tr>"
}
$("#view").html(html);
goList();
}
// 글쓰기 보여주기 기능
function goForm() {
$("#wform").css("display","block");
$("#list").css("display","none");
}
// 게시글 목록 다시 보여주기 기능
function goList() {
$("#wform").css("display","none");
$("#list").css("display","block");
}
// 게시글 작성기능
function goInsert() {
// title = hello&contents=hi&writer=hodoo
let fData = $("#frm").serialize();
console.log(fData);
$.ajax({
url : "boardInsert.do",
type : "post",
data : fData,
success :loadList,
error : function() {
alert("error...");
}
});
$("#fclear").trigger("click");
}
</script>
</body>
</html>
나는,,,,,,,,,나다