웹개발 플러스 2-8 상세페이지 ajax로 단어 뜻 가져오기

커뮤니티

포인트

로딩중

쿠폰

내 강의실

국비 신청 내역

수강권

증명서

숙제 피드백

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

웹개발 플러스 2-8 상세페이지 ajax로 단어 뜻 가져오기

웹개발 종합반

기타

이*현

・

추천

・

조회수

답변 완료

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Sparta Vocabulary Notebook</title>

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

       <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap 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>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
                integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
                crossorigin="anonymous"></script>
        <style>
            .wrap {
                background-color: RGBA(232, 52, 78, 0.2);
                min-height: 100vh;
                padding-bottom: 50px;
            }

            .banner {
                width: 100%;
                height: 200px;

                background-color: white;
                background-image: url('{{ url_for("static", filename="logo_red.png") }}');

                background-position: center;
                background-size: contain;
                background-repeat: no-repeat;

                cursor: pointer;
            }

            .container {
                width: 80%;
                max-width: 800px;
                margin: 30px auto;
                padding: 20px;
                background-color: white;

                border: solid 1px gray;
                border-radius: 10px;
            }

            span.example {
                color: gray;
                font-size: 14px;
            }

            .btn-sparta {
                color: #fff;
                background-color: #e8344e;
                border-color: #e8344e;
            }

            .btn-outline-sparta {
                color: #e8344e;
                background-color: transparent;
                background-image: none;
                border-color: #e8344e;
            }
        </style>
        <script>
            let word = '{{ word }}'
            $(document).ready(function () {
                get_definitions()
            })

            function get_definitions() {
                $.ajax({
                    type: "GET",
                    url: `https://owlbot.info/api/v4/dictionary/${word}`,
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("Authorization", "Token 59be98994820a084659540a51678ea0a1cbd4cbf");
                    },
                    data: {},
                    error: function (xhr, status, error) {
                        alert("에러 발생!");
                    },
                    success: function (response) {
                        console.log(response)
                    }
                })
            }

        </script>
    </head>
    <body>
    <div class="wrap">
        <div class="banner" onclick="window.location.href = '/'">
        </div>
        <div class="container">
            <div class="d-flex justify-content-between align-items-end">
                <div>
                    <h1 id="word" style="display: inline;">owl</h1>
                    <h5 id="pronunciation" style="display: inline;">/oul/</h5>
                </div>
                <button id="btn-save" class="btn btn-outline-sparta btn-lg"><i class="fa fa-floppy-o" aria-hidden="true"></i></button>
                <button id="btn-delete" class="btn btn-sparta btn-lg"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
            </div>
            <hr>
            <div id="definitions">
                <div style="padding:10px">
                    <i>noun</i>
                    <br>a nocturnal bird of prey with large eyes, a facial disc, a hooked beak, and typically a loud
                    hooting call.<br>
                    <span class="example">I love reaching out into that absolute silence, when you can hear the owl or the wind.</span>
                </div>
            </div>
        </div>
    </div>
    </body>
</html>

script 내부에 있는 Owlbot API 요청 Ajax 를 넣기 전까지는 실행이 잘 되는데 해당 코드를 넣으면

"에러 발생" 만 발생하고 웹사이트 콘솔 창에는

이라는 오류가 발생하는데 어떻게 해결해야 할지 모르겠습니다.

댓글 알림