습관제작소

22-08-29 JavaSpring Ajax 활용(테이블 Insert) 본문

SMHRD or ITSchool/JavaSpring and Boot

22-08-29 JavaSpring Ajax 활용(테이블 Insert)

KUDO 2022. 8. 29. 12:40

- base.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.0/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>SpringMVC02 SpringMVC + Ajax</h2>
        <div class="panel panel-default">
            <div class="panel-heading">스프링 게시판 만들기</div>
            <div class="panel-body">

                <table class="table table-hover table-bordered">
                    <thead>
                        <tr>
                            <td>글 번호</td>
                            <td>제목</td>
                            <td>작성자</td>
                            <td>작성일</td>
                            <td>조회수</td>
                        </tr>
                    </thead>
                    <tbody id="tbody">
                    </tbody>

                </table>
                <button id="openForm" class="btn-sm btn btn-info">작성하기</button>

                <div id="boardForm" style="display: none">
                    <form id="Form" class="form-horizontal">
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="title">title:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="title"
                                    placeholder="Enter title" name="title">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="writer">writer:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="writer"
                                    placeholder="Enter writer" name="writer">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="content">content:</label>
                            <div class="col-sm-10">
                                <textarea rows="10" class="form-control" name="content"
                                    id="content"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button id="submitForm" type="button" class="btn btn-default">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>


            </div>
            <div class="panel-footer">빅데이터 14차 백성연</div>
        </div>

    </div>

    <script src="resources/js/board.js"></script>
    <!-- 좌표는 webapp(=web)시작이다. 그래서 같은 프로젝트 같은 폴더라면 앞이 사라진다. -->
    <script type="text/javascript">
        // 페이지가 로드될 때, Ajax 요청을 할수 있도록 만들어 보자!
        $(document).ready(boardList);

    </script>

</body>
</html>

- BoardRestController.java


import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.smhrd.domain.Board;
import com.smhrd.mapper.BoardMapper;

@Controller
public class BoardRestController {

    //Ajax요청을 처리할 컨트롤러 >> RestController


    @Autowired
    private BoardMapper mapper;

    @RequestMapping("/test")
    public @ResponseBody String test(String data) {
        // 어노테이션 추가하자
        // @ResponseBody >> return하는 내용을 그대로 응답해줌
        // "문자열로 제일 많이 리턴함"

        // function (res)응답에 date이어야 한다. 만얀 리턴에 주소값이 들어가면 오류


        System.out.println("요청들어옴 : "+data);

        return "test";
    }

    // 받은 숫자 제곱 반환
    @RequestMapping("/square")
    public @ResponseBody String square(String num ) {
        int number = Integer.parseInt(num);
        int square= number*number;


        return square+"";
    }


    @RequestMapping("/boardList.do")
    public @ResponseBody List<Board> boardList() {

        List<Board>list=mapper.boardList();


        // 문제!!
        // 1. http 통신에서 글자(문자열)만 응답해줄 수 있음
        // 2. Javascript에서는 List<Board>를 이해하지 못함

        // 해결!!
        // List<Board> >> JSON변환
        // Jackson Datadind 라이브러리 사용(자동으로 json통과~)

        return list;
    }

    // 22-08-29 Insert
    @RequestMapping("boardInsert.do")
    public @ResponseBody String boardInsert(Board inputs) {

        mapper.boardInsert(inputs);
        return "";
    }

}

- board.js

        // insert 만들기
        $('#submitForm').on('click',function(){

            // Form태그 안에 있는 데이터를 쿼리스트링 처럼 나타내준다.
            let inputs=$('#Form').serialize();
            console.log(inputs);
            // date : inputs
            $.ajax({
                url : 'boardInsert.do',
                type : 'post',
                data : inputs,
                success:function(res){
                    console.log(res);
                    window.location.reload();  // << 리스트 새로고침, form태그 초기화 form 접기 즉, 새로고침하자!

                },
                errer : function (e) {
                    alert(e);
                }
            });
        })

'SMHRD or ITSchool > JavaSpring and Boot' 카테고리의 다른 글

22-09-05 JavaSpringBoot 환경설정(JSP, HTML 환경구축)  (0) 2022.09.05
22-09-02 JavaSpring Ajax 활용(게시글 삭제, 게시글 검색)/@Controller, @Restcontroller  (0) 2022.09.03
22-08-29 JavaSpring Ajax 활용(테이블 보기)  (0) 2022.08.29
22-08-26 JavaSpring Spring에서 Ajax사용하기  (1) 2022.08.27
22-08-22 JavaSpring DB연결 라이브러리 설정(최종), 게시물 작성  (0) 2022.08.27
'SMHRD or ITSchool/JavaSpring and Boot' Related Articles more
Comments