[jQuery+Ajax] 랜덤 이미지 바꾸기

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


                let msg = response['msg']
                let url = response['url']

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

            }
        })
    }
</script>

ajax를 통해 랜덤 이미지와 텍스트가 부여된 api에서 이미지 및 텍스트를 받아와 표현하는 방법이다.

위 예시는 q1함수에 이미지와 텍스트를 받아서 변환하는 기능을 입력하였고 버튼을 onclick 시 q1함수가 발동되도록 하였다. (html은 너무 길어서 가져오지 않았다.)

 

1. GET방식을 통해 api에서 어떤 형태로 자료를 주는지 먼저 console.log(response)를 찍어서 데이터 형태를 먼저 본다.

 

2. msg에 텍스트가, url에 이미지가 있음을 확인 하였으면 받아온 값을 각각 선언해 준다.

 

3. 다음과 같이 원하는 ID위치를 넣고 이미지 url 또는 넣고싶은 text를 넣는다.

//이미지 변환
$("#ID값입력").attr("src", '이미지 url'); 

//텍스트 변환
$("#ID값입력").text("넣고싶은 text");