DeseoDeSeo
[Spring] SpringMVC02_비동기방식 본문
○ 기존의 src > main > webapp > web-inf> view폴더에 있던 파일들을 삭제하고 boardform을 "main.jsp"로 바꿈.
main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix ="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix ="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Spring MVC02</h2>
<div class="panel panel-default">
<div class="panel-heading">Board</div>
<div class="panel-body">
<table id="boardList" class="table table-bordered table-hover">
<!-- tr class = success , info , danger, warning, active -->
<tr class="danger">
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
<tbody id="view">
<!-- 비동기 방식으로 가져온 게시글을 나오게 할 부분. -->
</tbody>
<tr>
<td colspan="5">
<button onclick="goForm()" class="btn btn-primary btn-sm"> 글쓰기 </button>
</td>
</tr>
</table>
</div>
<!-- 글쓰기 폼 -->
<div class ="panel-body" id="wform" style="display:none;">
<form id="frm"> <!--action ="boardInsert.do" method="post"> form 태그는 동기 방식임. -->
<table class="table" >
<tr>
<td>제목</td>
<!-- 반드시 name의 이름은 vo의 필드명과 똑같이 해야한다. -->
<!-- class=form-control사용하면 알아서 크기에 맞춰짐. -->
<td><input type ="text" name ="title" class ="form-control"></td>
</tr>
<tr>
<td>내용</td>
<td><textarea class ="form-control" name ="content" rows="7" cols=""></textarea></td>
</tr>
<tr>
<td>작성자</td>
<td><input type="text" name ="writer" class ="form-control"></td>
</tr>
<tr>
<td colspan="2" align="center">
<button class="btn btn-success btn-sm" type="button" onclick="goInsert()">등록</button>
<button class="btn btn-warning btn-sm" type="reset" id="fclear" >취소</button>
<button onclick = "goList()" class="btn btn-info btn-sm">목록</button>
<!-- a태그는 동기방식임. -->
</td>
</tr>
</table>
</form>
</div>
<div class="panel-footer">스프링게시판-쿨쿨이</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
//html이 다 로딩되고나서 아래의 코드를 실행함.
loadList();
});
//함수 정의
function loadList(){
//비동기방식으로 게시글 리스트 가져오기 기능
//ajax는 jquery라이브러리안에 있는 라이브러리.
//jquery => $()
//ajax안에는 요청url, 어떻게 데이터 받을지, 요청방식 등등 => 객체 형태로 넣어줌.
//json=> java script object
$.ajax({ //객체 표현
url:"boardList.do",
type : "get",
dataType:"json",
success: makeView,
//ajax를 요청한 다음에 성공하면 makeView를 실행함.(콜백함수)요청하고 나중에 끝나고 실행됨.
error:function(){alert("error");}
//실패하면 실행할 것..!
});
}
function makeView(data){
var listHtml = "";
$.each(data, function(index, obj){
// index는 회차 반복을 위해서 사용. obj는 하나씩 돌면서 데이터를 담음.
listHtml += "<tr>";
listHtml += "<td>" + (index+1) + "</td>";
listHtml += "<td id='t"+ obj.idx +"'>";
listHtml += "<a href='javascript:goContent(" + obj.idx+ ")'>";
listHtml += obj.title;
listHtml += "</a>";
listHtml += "</td>";
listHtml += "<td id='w"+ obj.idx +"'>" + obj.writer + "</td>";
listHtml += "<td>" + obj.indate + "</td>";
listHtml += "<td>" + obj.count + "</td>";
listHtml += "</tr>";
// 상세보기 화면
listHtml += "<tr id='c"+ obj.idx +"' style='display:none'>";
listHtml += "<td>내용</td>";
listHtml += "<td colspan='4'>";
listHtml += "<textarea id='ta" +obj.idx+ "' readonly rows='7' class='form-control'>"; //readonly는 읽기전용.
listHtml += obj.content;
listHtml += "</textarea>";
//수정, 삭제 화면
listHtml += "<br>";
listHtml += "<span id='ub"+ obj.idx +"'>";
listHtml +="<button onclick='goUpdateForm("+obj.idx+ ")' class='btn btn-sm btn-success'>수정화면</button></span> " // non break space
listHtml +="<button onclick='goDelete("+ obj.idx +")' class='btn btn-sm btn-warning'>삭제</button> "
listHtml += "</td>";
listHtml +="</tr>";
});
$("#view").html(listHtml);
//서버의 역할은 데이터를 분배하는 역할임. 각 클라이언트의 환경에 맞게 꾸며준다.
goList();
}
//goForm 함수를 만들어서 view는 감추고 wform은 보이게 하시오.
function goForm(){
/* css바꿈 */
$("#boardList").css("display","none");
$("#wform").css("display","block");
}
function goList(){
/* css바꿈 */
$("#wform").css("display","none");
$("#boardList").css("display","block");
}
function goInsert(){
/* 게시글 등록기능-비동기 */
var fData = $("#frm").serialize();
/* goInsert를 눌렀을 때 frm 안에 있는 input 태그 값의 title="안녕"&content="반가워" 이런식으로 직렬화 해서 가져오는거임. */
$.ajax({
url : "boardInsert.do",
type : "post",
data : fData,
success: loadList,
error: function(){ alert("error") }
});
$("#fclear").trigger("click");
}
function goContent(idx){
//display속성의 값을 가져옴.
// 안 보이는 상태면 보이게 해줌.
if($("#c"+ idx).css("display")=="none"){
$("#c"+ idx).css("display", "table-row");
}else{
$("#c"+ idx).css("display","none");
}
}
function goDelete(idx){
$.ajax({
url:"boardDelete.do",
type:"get",
data:{"idx": idx},
success:loadList,
error: function(){alert("error");}
});
}
function goUpdateForm(idx){
$("#ta"+ idx).attr("readonly", false);
var title =$("#t"+ idx).text();
var newTitle ="<input id='nt"+ idx +"' value='"+ title +"' type='text' class='form-control'>";
$("#t"+ idx).html(newTitle);
var writer =$("#w"+ idx).text();
var newWriter ="<input id='nw"+idx+"' value='"+ writer +"' type='text' class='form-control'>";
$("#w"+ idx).html(newWriter);
var newBtn ="<button onclick='goUpdate("+idx+")' class='btn btn-primary btn-sm'>수정</button>";
$("#ub"+idx).html(newBtn);
}
function goUpdate(idx){
var title =$("#nt" + idx).val();
var content =$("#ta" + idx).val();
var writer =$("#nw" + idx).val();
//console.log(title+"/"+ content+"/"+writer);
//boardUpdate.do로 요청을 통해 게시글을 수정하고
// 수정된 게시글 다시 불러와서 적용시키시오.
$.ajax({
url:"boardUpdate.do",
type:"get",
data:{"idx": idx},
success:loadList,
error: function(){alert("error");}
});
}
</script>
</body>
</html>
글쓰기
<button class="btn btn-success btn-sm" type="button" onclick="goInsert()">등록</button>⬇
function goInsert(){
/* 게시글 등록기능-비동기 */
var fData = $("#frm").serialize();
/* goInsert를 눌렀을 때 frm 안에 있는 input 태그 값의 title="안녕"&content="반가워" 이런식으로 직렬화 해서 가져오는거임. */
$.ajax({
url : "boardInsert.do",
type : "post",
data : fData,
success: loadList,
error: function(){ alert("error") }
});
$("#fclear").trigger("click");
}jQuery : 자바스크립트를 간편하게 사용할 수 있도록 단순화시킨 오픈소스 기반 라이브러리
☑ Ajax 메소드의 종류
○ $.ajax( ) : 비동기식 Ajax를 이용하여 HTTP 요청함.
○ $.get( ) : HTTP GET 방식으로 요청 후 서버로부터 데이터를 받음.
○ $.post( ) : HTTP POST 방식으로 요청 후 서버로부터 데이터를 받음.
○ $.getScript( ) : HTTP GET 방식으로 요청 후 서버로부터 받은 JavaScript 파일을 로드하고 실행.
○ $.getJSON( ) : HTTP GET 방식으로 요청 후 서버로부터 받은 JSON파일을 로드하고 실행.
○ .load( ) : URL로부터 HTML데이터를 받고 jQuery 셀럭터로 선택된 곳에 넣어 줌으로써 동적으로 페이지 내용을 쉽게 교체함.
○ $( ) : jQuery에서 선택자 역할을 함. 실제로 사용자가 입력한 ID값을 받아옴.
➜ $(요소선택자).동작함수( ) ;
➤ 요소 선택자를 이용해 원하는 HTML요소를 선택하고 동작함수를 정의하여 선택된 요소에 원하는 동작을 설정.
○ console.log( $('bed').html( ) ); ➜ 요소에 접근하기!
○ .val( )는 Value값을 가져오는 메소드.
○ url : 요청 url
○ type : 요청방식( get, post, put, delete)
○ data: 전달할 파라미터
○ dataType: 서버에서 반환되는 데이터 형식( text, html, xml, json, jsonp, and script )
- "xml" : XML문서
- "html" : html을 텍스트 데이터로
-"script": JavaScript 코드를 텍스트 데이터로
⬇
BoardController.java
@RequestMapping("/boardInsert.do")
public @ResponseBody void boardInsert(Board board) {
System.out.println("게시글 작성 기능수행");
mapper.boardInsert(board);
}⬇
BoardMapper.java
public void boardInsert(Board board);BoardMapper.xml
<insert id ="boardInsert" parameterType="kr.spring.entity.Board">
INSERT INTO BOARD(TITLE, CONTENT, WRITER) VALUES(#{title},#{content},#{writer})
</insert>
$.each(data, function(index, obj)❑ $.each( )메서드는 object와 배열 모두사용 가능한 일반적인 반복 함수.
❑ 첫번째 매개변수로 배열이나 객체, 두번째 매개변수로 콜백함수를 받음.
콜백함수의 인자로는 인덱스와 값을 인자로 갖는다.
BoardController.java
package kr.spring.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import kr.spring.entity.Board;
import kr.spring.mapper.BoardMapper;
@Controller // 현재 클래스를 핸들러맵핑이 찾기 위해 컨트롤러로 등록하는 부분.
public class BoardController {
@Autowired // 자동으로 연결하는 거.
private BoardMapper mapper;// mybatis한테 JCBC를 실행하라고 요청하는 객체
@RequestMapping("/")// 요청url로 들어왔을 때 아래 기능을 수행하겠다.
public String home(){
System.out.println("홈 기능 수행");
return "main"; // 다시 접속할 주소를 리다이렉트 방식으로 리턴하는거임.
}
@RequestMapping("/boardList.do")
public @ResponseBody List<Board> boardList() {
System.out.println("게시글 전체보기 기능수행");
//@responsebody를 넣어야지 비동기방식으로 됨.
// 확장성을 위해서 arraylist대신 List를 사용함.
List<Board> list = mapper.getLists();
return list;
}
@RequestMapping("/boardInsert.do")
public @ResponseBody void boardInsert(Board board) {
System.out.println("게시글 작성 기능수행");
mapper.boardInsert(board);
}
@RequestMapping("/boardDelete.do")
public @ResponseBody void boardDelete(@RequestParam("idx") int idx) {
System.out.println("게시글 삭제 기능수행");
mapper.boardDelete(idx);
}
}'spring' 카테고리의 다른 글
| [Spring] springMVC03 실습 (0) | 2023.09.15 |
|---|---|
| [Spring] SpringMVC02_비동기방식_BoardRestController생성 (0) | 2023.09.14 |
| [Spring] 비동기방식 (0) | 2023.09.12 |
| [Spring] SpringMVC01_동기방식 마무리 (0) | 2023.09.12 |
| [Spring] SpringMVC01_게시판 구현(글쓰기) (0) | 2023.09.07 |
'spring' Related Articles
more
