Ajax를 사용하여 이미지와 텍스트 불러오기

by 본투비곰손 2022. 11. 30. 00:00

728x90

이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);
텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");

<!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() {
            
            $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/rtan", //API 주소
        data: {},
        success: function(response){
                let url = response['url'] //배열에서 필요한 이미지 url 변수 선언
                let msg = response['msg'] //배열에서 필요한 text 변수 선언

                $("#img-rtan").attr("src", url); // 속성을 변수로 변경하여준다.
                $("#text-rtan").text(msg); // text를 변수로 변경하여 준다.
                }
            })
        }
</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/SpartaIcon02.png"/>
<h1 id="text-rtan"></h1>
</div>
</div>
</body>
</html>

728x90

'CS전공 지식 > 웹서비스 이해하기' 카테고리의 다른 글

mongoDB에 가입하고 사용해보기 (0)	2022.12.02
파이썬을 이용한 웹 크롤링 (네이버영화) (0)	2022.12.02
Ajax로 서울시 실시간 따릉이 현황(OpenAPI) (0)	2022.11.29
Ajax로 서울시 미세먼지 상태 보기(OpenAPI) (0)	2022.11.29
서버 클라이언트 통신 이해하기 (0)	2022.11.29