4-9 [모두의책리뷰] GET연습(리뷰 보여주기)

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

4-9 [모두의책리뷰] GET연습(리뷰 보여주기)

undefined주차

김*지

・

추천

・

조회수

답변 완료

4-9 [모두의책리뷰] GET연습(리뷰 보여주기)를 하고 있는데콘솔창에 제목, 저자, 리뷰 순으로 출력이 안되네요.

저의 경우 undefined undefined undefined로 출력이 되어요.

------

<!DOCTYPE html>
<html lang="ko">

<head>
    <!-- Webpage Title -->
    <title>모두의 책리뷰 | 스파르타코딩클럽</title>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
          crossorigin="anonymous">

    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>

    <!-- 구글폰트 -->
    <link href="https://fonts.googleapis.com/css?family=Do+Hyeon&display=swap" rel="stylesheet">

    <script type="text/javascript">

        $(document).ready(function () {
            showReview();
        });

        function makeReview() {
            let title = $('#title').val()
            let author = $('#author').val()
            let review = $('#bookReview').val()

            $.ajax({
                type: "POST",
                url: "/review",
                data: {title_give:title, author_give:author, review_give:review},
                success: function (response) {
                    alert(response["msg"]);
                    window.location.reload();
                }
            })
        }

        function showReview() {
            $.ajax({
                type: "GET",
                url: "/review",
                data: {},
                success: function (response) {
                    let reviews = response['all_reviews']
                    for (let i = 0; i < reviews.length; i++) {
                        let title = reviews['title']
                        let author = reviews['author']
                        let review = reviews['review']

                        console.log(title, author, review)
                    }

                }
            })
        }
    </script>

    <style type="text/css">
        * {
            font-family: "Do Hyeon", sans-serif;
        }

        h1,
        h5 {
            display: inline;
        }

        .info {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .review {
            text-align: center;
        }

        .reviews {
            margin-top: 100px;
        }
    </style>
</head>

<body>
<div class="container">
    <img src="https://previews.123rf.com/images/maxxyustas/maxxyustas1511/maxxyustas151100002/47858355-education-concept-books-and-textbooks-on-the-bookshelf-3d.jpg"
         class="img-fluid" alt="Responsive image">
    <div class="info">
        <h1>읽은 책에 대해 말씀해주세요.</h1>
        <p>다른 사람을 위해 리뷰를 남겨주세요! 다 같이 좋은 책을 읽는다면 다 함께 행복해질 수 있지 않을까요?</p>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">제목</span>
            </div>
            <input type="text" class="form-control" id="title">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">저자</span>
            </div>
            <input type="text" class="form-control" id="author">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">리뷰</span>
            </div>
            <textarea class="form-control" id="bookReview"
                      cols="30"
                      rows="5" placeholder="140자까지 입력할 수 있습니다."></textarea>
        </div>
        <div class="review">
            <button onclick="makeReview()" type="button" class="btn btn-primary">리뷰 작성하기</button>
        </div>
    </div>
    <div class="reviews">
        <table class="table">
            <thead>
            <tr>
                <th scope="col">제목</th>
                <th scope="col">저자</th>
                <th scope="col">리뷰</th>
            </tr>
            </thead>
            <tbody id="reviews-box">
            </tbody>
        </table>
    </div>
</div>
</body>

</html>

댓글 알림