2-13 Ajaxs 예문 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

2-13 Ajaxs 예문

undefined주차

김*은

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

수업 내용에 따라 [르탄이 나와] 버튼 클릭 시 캐릭터 & 문자열이 변경되어야 하는데

문자열은 정상 작동 하지만 캐릭터 이미지가 교체되지 않는 문제가 있습니다.

강의 자료내 정답지와 영상 속 강사님의 코드가 완전 동일하진 않아 헷갈리네요 ㅜㅠ

혹 제가 어느부분에서 실수가 있었을지 확인 가능하실까요?

먼저 코드 전문 첨부드립니다.

<!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",
         data: {},
         success: function(response){
           let url = response['url'];
           let msg = response['msg'];

          $('#img-rtan').attr('scr',url);
          $('#text-rtan').text(msg);
         }
       })
     }

    </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() {
   $.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('scr',url);
      $('#text-rtan').text(msg);
     }
   })
 }

</script>

오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!

댓글 알림