JavaScript #11

윤동민·2024년 6월 24일
APIajaxjson

JavaScript

목록 보기
12/12

Ajax - 다른 html 불러오기

html

  <script>
      $(function () {
        $('#loadButton').click(function () {
          $.ajax({
            url: 'list_ajax.html', //요청을 보낼 URL
            type: 'GET',
            success: function (data) {
              $('#result').html(data);
            }, //응답성공
            error: function (error) {
              alert('요청오류');
            }, //응답실패
          });
          //제이쿼리의 AJAX 요청을 수행하는 함수, 서버에 비동기적으로 요청을 보내고, 응답을 처리
        });
      });
    </script>
  </head>
  <body>
    <h2>AJAX 통신 예제</h2>
    <button id="loadButton">데이터 불러오기</button>
    <br />
    <div id="result"></div>
  </body>

불러올 html

<body>
    <section>
      <article>
        <table border="1" style="width: 50%">
          <tr>
            <th>이름</th>
            <th>점수</th>
          </tr>
          <tr>
            <td>이순신</td>
            <td>90</td>
          </tr>
          <tr>
            <td>강감찬</td>
            <td>80</td>
          </tr>
          <tr>
            <td>을지문덕</td>
            <td>70</td>
          </tr>
        </table>
      </article>
    </section>
  </body>

ajax

서버와 비동기적으로 데이터를 주고 받는 자바스크립트 기술
원하는 데이터 url + GET 요청 시, 브라우저는 새로고침을 통해 응답하지만
AJAX는 새로고침 없이 데이터를 요청하는 자바스크립트 기술

Ajax 2

<script>
      $(function () {
        $('#sendButton').click(function () {
          let username = $('#username').val();
          let password = $('#password').val();
          $('#result').append('<div>회원이름 : ' + username + '님 환영합니다.<div>');
        });
      });
    </script>
  </head>
  <body>
    <h2>AJAX 예제</h2>
    <label for="username">회원 이름 : </label><br />
    <input type="text" id="username" placeholder="회원이름" /> <br />
    <label for="password">비밀번호 : </label><br />
    <input type="text" id="password" placeholder="비밀번호" /> <br />
    <br />
    <button id="sendButton">로그인</button>
    <br />
    <hr />
    <div id="result"></div>
  </body>

Ajax 3 - JSON 불러오기

<script>
      $(function () {
        $('#loadButton').click(function () {
          $.ajax({
            //비동기적으로 데이터 불러옴
            url: 'dummy.json',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
              //성공하면 dummy가 data에 들어감
              console.log(data);

              $('#titleLayout').html('<h2>' + data.title + '</h2>');
              //dummy.title값인 안녕하세요가 h2끼고 들어간다
              $('.subjectLayout').html('<h2>' + data.subject + '<h2>');

              let list = data.list;
              let tableTag = '';
              /*
              for (let i = 0; i < list.length; i++) {
                tableTag += '<tr><td>' + list[i].subject + '</tr><td>' + list[i].content + '</td></tr>';
              }*/
              $.each(list, function (index, row) {
                tableTag += '<tr><td>' + row.subject + '</td><td>' + row.content + '</td></tr>';
              });
              $('table').html(tableTag); //리스트 안에 있는 내용(tr/td형태로)이 다 들어감
            },
          });
        });
      });
    </script>
  </head>
  <body>
    <input type="button" value="로드" id="loadButton" />
    <div id="titleLayout"></div>
    <div class="subjectLayout"></div>
    <table style="width: 100%; border: 1px solid"></table>
  </body>

JSON

{
  "title": "안녕하세요",
  "subject": "반갑습니다",
  "list": [
    {
      "subject": "제목입니다1",
      "content": "제목입니다1"
    },
    {
      "subject": "제목입니다2",
      "content": "제목입니다2"
    },
    {
      "subject": "제목입니다3",
      "content": "제목입니다3"
    }
  ]
}

dummy.json값 불러오기

$(function () {
        $('#loadButton').click(function () {
          $.ajax({
            url: 'dummy.json',
            type: 'GET',
            dataType: 'json',
            success: function (data)
  1. 함수 작용 → 버튼을 누르면 실행 → 'dummy.jonn'불러오고
  2. 불러오는게 성공했다면 function (data)의 data에 값 저장
$('#titleLayout').html('<h2>' + data.title + '</h2>');
$('.subjectLayout').html('<h2>' + data.subject + '<h2>');
  1. #titleLayout로 div=id 선택
  2. 그 다음 h2 사이에 data.요소들 입력
$.each(list, function (index, row) {
tableTag += '<tr><td>' + row.subject + '</td><td>' + row.content + '</td></tr>'; });
$('table').html(tableTag);

.each : 반복문

  1. list 배열의 각 항목에 대해 반복문을 실행합니다.
  • index : 현재 반복의 위치(인덱스)
  • row : 현재 배열의 요소
  1. tableTag += '' + row.subject + '' + row.content + '';:
  • row객체의 'subject'와 'content'속성을 td(테이블 셀) 요소 생성
  • td로 테이블 셀을 생성하고 'tableTag' 문자열에 추가
  1. $('table').html(tableTag);
  • HTML 문서의 table 요소를 선택
  • table 요소의 내용을 tableTag 문자열로 바꿔 생성된 행들이 해당 테이블에 삽입됌

Ajax 4 - JSON 불러와 ul에 넣기

html

<script>
      $(function () {
        $.getJSON('stdinfo.json', function (data) {
          //.getJSON() : 지정된 url에서 JSON 데이터를 읽어와 콜백함수와 함께 수행
          let items = [];
          $.each(data, function (key, val) {
            items.push("<li id='" + key + "'>" + val + '</li>'); //하나의 배열을 만들어놓고 그 안에다가 푸시하겠다.
            //<li id="name"> val=홍길동 </li> 이렇게 배열 순서대로 불러온다.
          });
          $('<ul/>', {
            class: 'my-new-list',
            html: items.join(''), //위의 배열 요소들을 조인하겠다.
          }).appendTo('body');
        });
      });
    </script>
  </head>
  <body>
    <h2>JSON 파일 읽어오기</h2>
  </body>

json

{
  "name": "홍길동",
  "age": 30,
  "occupation": "소프트웨어 개발자",
  "location": "서울, 대한민국"
}

  1. each는 JSON 데이터를 각 항목으로 반복하여 처리합니다.
  2. 'items'배열에 li + key + val + li 라는 항목을 li로 만들어 'items'배열에 추가
  3. 클래스가 'my-new-list'인 ul요소를 만듭니다.
  4. 'items'배열을 하나의 html 문자열로 결합하고 생성된 ul요소를 body요소에 추가합니다.

API 가져오기 - 콜백함수

<script>
      $(function () {
        $('#getDogImage').click(function () {
          // ID 수정
          $.ajax({
            url: 'https://dog.ceo/api/breeds/image/random',
            type: 'GET',
            success: function (result) {
              $('#dogImage').attr('src', result.message); //속성추가
            },
            error: function (error) {
              alert('요청오류');
            },
          });
        });
      });
    </script>
  </head>
  <body>
    <h2>강아지 이미지 가져오기</h2>
    <button id="getDogImage">강아지 이미지 가져오기</button>
    <!-- ID 수정 -->
    <hr />
    <img id="dogImage" alt="개 이미지" />
  </body>

1.URI로 강아지 랜덤 사진 API를 가져온다.
2. success 콜백 함수는 요청이 성공했을때 실행한다.
3. 서버의 답변(강아지사진) → result 인수로 받습니다

$('#dogImage').attr('src', result.message);

  1. result.message에 api로 받은 강이지 URL 포함
  2. '#dogImage' id 이미지 요소의 .attr(요소추가) 'src'속성을 'result.message'로 업뎃
  3. error 콜백함수는 실패했을때 실행

API 가져오기 - 날씨

<script>
      $(function () {
        let api = '075727d1159e057dcbf7c63b5f5e3dac';
        let city = 'Seoul'; //이 파라미터값이 런던으로 바뀌거나 유저 api가 바뀔 수 있기 때문에 한 번에 url을 입력하지 않는다 = 유동적 운영
        let apiUrl = 'https://api.openweathermap.org/data/2.5/weather?q=' + city + '&appid=' + api;

        $.ajax({
          url: apiUrl,
          type: 'GET',
          success: function (result) {
            let tempInCelsius = Math.round(result.main.temp - 273.15); //현재 온도를 받아온다

            $('#result').html('<h3>' + city + '의 현재 온도는 ' + tempInCelsius + '°C입니다.</h3>');
          },
          error: function (error) {
            alert('잘못된 요청입니다.');
          },
        });
      });
    </script>
  </head>
  <body>
    <h2>날씨 API 데이터 가져오기</h2>
    <div id="result"></div>
  </body>

profile
윤동민
나를 한줄로 소개하자
이전 포스트

JavaScript #10

0개의 댓글