나의 기록_나의 다이어리

[스파르타코딩클럽: 웹개발종합반] 2주차 정리 (Ajax 실습3 - 버튼 누를 때마다 사진과 텍스트 랜덤 표시) 본문

코딩/국비지원 개발인강 (스파르타코딩클럽)

[스파르타코딩클럽: 웹개발종합반] 2주차 정리 (Ajax 실습3 - 버튼 누를 때마다 사진과 텍스트 랜덤 표시)

NayDiary 2022. 11. 6. 18:41
반응형
SMALL

1. Ajax 기본 골격

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

 

2.  르탄이 API

http://spartacodingclub.shop/sparta_api/rtan

 

3. Ajax 연습 (Ajax 코드 넣기 전 골격)

1) PyCharm ➡️ 파일 새로 만들기 ➡️ HTML 파일 형식 선택 ➡️ HTML 파일 새로 생성

2) 새로 만든 HTML 파일 형식에 써있던 기존 내용 다 지우기

3) 아래 형식 그대로 복사-붙여넣기

<!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>

4) 붙여넣기 한 코드 중 아래 부분에 Ajax 내용 추가 필요

    <script>
      function q1() {
        $.ajax({
          type: "GET",
          url: "http://spartacodingclub.shop/sparta_api/rtan",
          data: {},
          success: function(response){
              let imgurl = response['url'];
              $("#img-rtan").attr("src", imgurl);
              // 이미지 바꾸기 코드 : $("#아이디값").attr("src", 이미지URL);

              let msg = response['msg'];
              $("#text-rtan").text(msg); 
              //텍스트 바꾸기 코드 : $("#아이디값").text("바꾸고 싶은 텍스트");
            }
          })
      }
    </script>
  • 이미지 바꾸기 코드 : $("#아이디값").attr("src", 이미지URL);
  • 텍스트 바꾸기 코드 : $("#아이디값").text("바꾸고 싶은 텍스트");

 

4. Ajax 코드 추가 후 완성 코드

<!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 imgurl = response['url'];
              $("#img-rtan").attr("src", imgurl);

              let msg = response['msg'];
              $("#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>

 

 

 

5. Ajax 구현 페이지

  • 아래와 같은 페이지로 구성
  • '르탄이 나와' 버튼을 누르면 르탄이 이미지와 텍스트가 랜덤으로 바뀜
http://spartacodingclub.shop/ajaxquiz/08
반응형
SMALL

 

반응형
LIST
저작자표시

'코딩 > 국비지원 개발인강 (스파르타코딩클럽)' 카테고리의 다른 글

[PyCharm][mongoDB]파이참으로 몽고DB에 데이터 insert 시, 에러코드 해결하기 (certifi 패키지)  (0) 2022.11.08
[스파르타코딩클럽: 웹개발종합반] 2주차 정리 (Ajax 과제 - 페이지에 실시간 날씨 정보 표시하기)  (0) 2022.11.06
[스파르타코딩클럽: 웹개발종합반] 2주차 정리 (Ajax 실습2 - 서울시 실시간 따릉이 OpenAPI 이용하여 실시간 따릉이 현황 표시)  (0) 2022.11.06
[스파르타코딩클럽: 웹개발종합반] 2주차 정리 (Ajax 실습1 - 서울시 미세먼지 OpenAPI 이용하여 실시간 미세먼지 표시)  (0) 2022.11.06
[스파르타코딩클럽: 웹개발종합반] 2주차 정리 (Ajax 설명)  (0) 2022.11.06
'코딩/국비지원 개발인강 (스파르타코딩클럽)' Related Articles more
Comments