습관제작소

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

SMHRD or ITSchool/JavaSpring and Boot

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

KUDO 2022. 8. 29. 11:24

- 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>

    </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);

        // 게시글 목록을 가져와 출력하는 함수
        function boardList() {
            $.ajax({
                url:'boardList.do',
                type:'get',

                // 받아오는 타입이 json으로 받아오기
                dateType:'json',

                // 리콜 함수, 함수처럼 사용할 수 있다.
                // 코드가 길어져서 따로 빼서 만든다.
                success:makeTable,
                error: function (e) { alert('error!') }
            });
        }


        function makeTable(res) {
            console.log(res[0].title);

            // 0. tbody를 초기화
            $('tbody').html('');

            for(let i =0; i<res.length;i++){


                // script를 통해 html 수정할 때 팁

                // 1 문자열 형식으로 tr태그 만들기
                // ``(백틱 '~아래 키') "" 다르게 Enter 가능하다
                // ${res[i].idx} js포맷팅 사용할 경우 EL로 해석이 선 진행 되는 문제가 발생한다
                // >> js 파일로 빼주거나 jsp에서 사용할 경우 \(=대부분 언어에서 특정 조건 회피)사용한다.

                tr = `
                    <tr>
                        <td>\${i+1}</td>
                        <td>\${res[i].title}</td>
                        <td>\${res[i].writer}</td>
                        <td>\${res[i].indate}</td>
                        <td>\${res[i].count}</td>
                    <tr>
                    `

                // 2. tbody 태그 안에 넣기

                // HTML직접 변경하기
                // $('선택자').html('코드') : 안에 있는 코드 덮어쓰기

                 // $('선택자').before('코드') : 선택한 태그 바로 앞 삽입(추가)
                // $('선택자').after('코드') : 선택한 태그 바로 뒤 삽입(추가)

                // $('선택자').append('코드') : 안에 코드 삽입
                $('#tbody').append(tr);
            }


        }

    </script>


</body>
</html>

- BoardRestController

<%@ 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>

    </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);

        // 게시글 목록을 가져와 출력하는 함수
        function boardList() {
            $.ajax({
                url:'boardList.do',
                type:'get',

                // 받아오는 타입이 json으로 받아오기
                dateType:'json',

                // 리콜 함수, 함수처럼 사용할 수 있다.
                // 코드가 길어져서 따로 빼서 만든다.
                success:makeTable,
                error: function (e) { alert('error!') }
            });
        }


        function makeTable(res) {
            console.log(res[0].title);

            // 0. tbody를 초기화
            $('tbody').html('');

            for(let i =0; i<res.length;i++){


                // script를 통해 html 수정할 때 팁

                // 1 문자열 형식으로 tr태그 만들기
                // ``(백틱 '~아래 키') "" 다르게 Enter 가능하다
                // ${res[i].idx} js포맷팅 사용할 경우 EL로 해석이 선 진행 되는 문제가 발생한다
                // >> js 파일로 빼주거나 jsp에서 사용할 경우 \(=대부분 언어에서 특정 조건 회피)사용한다.

                tr = `
                    <tr>
                        <td>\${i+1}</td>
                        <td>\${res[i].title}</td>
                        <td>\${res[i].writer}</td>
                        <td>\${res[i].indate}</td>
                        <td>\${res[i].count}</td>
                    <tr>
                    `

                // 2. tbody 태그 안에 넣기

                // HTML직접 변경하기
                // $('선택자').html('코드') : 안에 있는 코드 덮어쓰기

                 // $('선택자').before('코드') : 선택한 태그 바로 앞 삽입(추가)
                // $('선택자').after('코드') : 선택한 태그 바로 뒤 삽입(추가)

                // $('선택자').append('코드') : 안에 코드 삽입
                $('#tbody').append(tr);
            }


        }

    </script>


</body>
</html>

- Jackson Datadind 라이브러리

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

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