[Ajax] (4) Quiz

728x90

Ajax 퀴즈 2

이번에 풀어야 할 문제는

르탄이 API를 이용하여 이미지를 바꿔주는 것이다.

기본적으로 주어진 코드

<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JQuery 연습하고 가기!</title>
    <!-- JQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }

        div.question-box > div {
            margin-top: 30px;
        }

    </style>

    <script>
        function q1() {
// 여기에 코드를 입력하세요
        }
    </script>

</head>
<body>
<h1>JQuery+Ajax의 조합을 연습하자!</h1>

<hr/>

<div class="question-box">
    <h2>3. 르탄이 API를 이용하기!</h2>
    <p>아래를 르탄이 사진으로 바꿔주세요</p>
    <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
    <button onclick="q1()">르탄이 나와</button>
    <div>
        <img id="img-rtan" width="300" src="http://spartacodingclub.shop/static/images/rtans/SpartaIcon11.png"/>
        <h1 id="text-rtan">나는 ㅇㅇㅇ하는 르탄이!</h1>
    </div>
</div>
</body>
</html>

해당 코드를 활용해 사이트를 제작해보자.

<script>
        function q1() {
// 여기에 코드를 입력하세요
        }
    </script>

function q1() 코드에 Ajax 기본코드를 넣어보자.

<script>
    function q1() {
        $.ajax({
            type: "GET",
            url: "여기에URL을입력",
            data: {},
            success: function (response) {
                console.log(response)
            }
        })
    }
</script>

이것을 콘솔창에 출력해보면

이와같은 창이 나타나게 되고 콘솔창을 분석해보자

msg 가 나는 ㅇㅇㅇ하는 르탄이!

값이고

url 이 이미지인것을 확인할 수 있다.

그렇다면 이건 간단하다.

<script>
    function q1() {
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/rtan",
            data: {},
            success: function (response) {
                let url = response['url']
                let msg = response['msg']

                console.log(url,msg)
            }
        })
    }
</script>

해당 url 과 msg 를 변수값을 준 후 콘솔창에 찍어내보는 것이다.

이런식으로 이미지와 나는 ㅇㅇㅇ하는 르탄이! 가 출력되는것을 확인할 수 있다.

여기서 부터는 배우지 않았던 새로운 코드가 등장한다.

$('#img-rtan').attr('src',url)
$('#text-rtan').text(msg)

나눠서 보면

$('#img-rtan').attr('src',url)

이 코드는 이미지를 가져와서 출력해주는 구문

('src',url)

여기서 'src',url 은 src를 url로 바꿔줄거에요 라는 말이다.

$('#text-rtan').text(msg)

이 코드는 텍스트를 출력해주는 구문이다.

<script>
    function q1() {
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/rtan",
            data: {},
            success: function (response) {
                let url = response['url']
                let msg = response['msg']

                $('#img-rtan').attr('src',url)
                $('#text-rtan').text(msg)
            }
        })
    }
</script>

결과적으로 이렇게 출력해주면

2022-12-28 15-33-58.mp4

0.71MB

해당 화면처럼 새로고침 되어서 나타난다.

-끝-

728x90

저작자표시

'📁𝐩𝐫𝐨𝐠𝐫𝐚𝐦𝐦𝐢𝐧𝐠𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞 > Python' 카테고리의 다른 글

[Python] 파이썬 패키지 사용해보기 (0)	2022.12.28
[Python] 파이썬 기초공부 (2)	2022.12.28
[Ajax] (3) Quiz_1 (0)	2022.12.27
[Ajax] (2) 연습하기 (0)	2022.12.27
[Ajax] (1) 시작하기 (0)	2022.12.27