develope_kkyu

[AJAX] fetch-function 본문

FrontEnd/AJAX

[AJAX] fetch-function

developekkyu37 2022. 12. 22. 14:28
728x90
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fetch-function</title>
    <style>
        li{
            font-size: 40px;font-weight: bold;
        }
    </style>
    <script>
        function clickPage(file){
            fetch(file).then(function(response){
                            response.text().then(function(text){
                                document.querySelector('article').innerHTML=text
                            })
                        });
        }
    </script>
</head>
<body>
    <ol>
        <li>
            <a onclick="clickPage('./txt/html')">HTML 소개</a>
        </li>
        <li>
            <a onclick="clickPage('./txt/css')">CSS 소개</a>
        </li>
        <li>
            <a onclick="clickPage('./txt/javascript')">JAVASCRIPT 소개</a>
        </li>
        <li>
            <a onclick="clickPage('./txt/jquery')">JQuery 소개</a>
        </li>
    </ol>
    <article>

    </article>
</body>
</html>

css

<h1>CSS 소개</h1>
    <P>
        CSS is... Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam quod sunt consequatur, dolorum voluptatem perspiciatis non, fuga ab tempore dignissimos enim minima? Eligendi impedit velit consectetur, nesciunt nostrum dolor doloribus?
    </P>

html

<h1>HTML 소개</h1>
    <P>
        HTML is... Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam quod sunt consequatur, dolorum voluptatem perspiciatis non, fuga ab tempore dignissimos enim minima? Eligendi impedit velit consectetur, nesciunt nostrum dolor doloribus?
    </P>

javascript

<h1>HTML 소개</h1>
    <P>
        HTML is... Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam quod sunt consequatur, dolorum voluptatem perspiciatis non, fuga ab tempore dignissimos enim minima? Eligendi impedit velit consectetur, nesciunt nostrum dolor doloribus?
    </P>

jquery

<h1>Jquery 소개</h1>
    <P>
        Jquery is... Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam quod sunt consequatur, dolorum voluptatem perspiciatis non, fuga ab tempore dignissimos enim minima? Eligendi impedit velit consectetur, nesciunt nostrum dolor doloribus?
    </P>

--

728x90

'FrontEnd > AJAX' 카테고리의 다른 글

[AJAX] fetch  (0) 2022.12.22
'FrontEnd/AJAX' Related Articles more