jQuery 를 활용해 AJAX 사용 load()

TEXT. HTML 파일 가져오기 load()

제이쿼리파일가져오기.html 생성

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 제이쿼리CDN -->
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="container">
      <div id="result"></div>
    </div>
    <script>
      $("#result").load("text.html");
    </script>
  </body>
</html>

text.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>가져갈문서</title>
  </head>
  <body>
    <h1>html 문서입니다.</h1>
  </body>
</html>

화면 출력

html,txt 등 파일을 load()를 통해 가져올 수 있음

만약 잘못된 파일 ( 없는 파일) 을 가져오려고 시도 했을 경우 오류 발생하도록 코드 작성할 수 있음.

    <script>
      $("#result").load("text.html", function (Response, status, xhr) {
        if (status === "success") {
          alert("이상없음");
        } else if (status === "error") {
          alert("에러: " + xhr.status);
        }
      });
    </script>

상태가 성공이면 이상없음 alert창 출력

에러면 에러 내용 alert창 출력

그래서 만약 text.html 이 아닌 text11.html (없는 파일) 을 가져온다고 시도하면

위와 같은 alert창이 발생한다.

JSON 타입 가져오기

위의 제이쿼리파일가져오기.html 복사해서 제이쿼리JSON가져오기.html 생성

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 제이쿼리CDN -->
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="container">
      <div id="result"></div>
    </div>
    <script>
      $.getJSON("user.json", function (data) {
        console.log(data);
      });
    </script>
  </body>
</html>

가져올

user.json 생성

[
  {
    "id": 1,
    "first_name": "Jeanette",
    "last_name": "Penddreth",
    "email": "jpenddreth0@census.gov",
    "gender": "Female",
    "ip_address": "26.58.193.2"
  },
  {
    "id": 2,
    "first_name": "Giavani",
    "last_name": "Frediani",
    "email": "gfrediani1@senate.gov",
    "gender": "Male",
    "ip_address": "229.179.4.212"
  },
  {
    "id": 3,
    "first_name": "Noell",
    "last_name": "Bea",
    "email": "nbea2@imageshack.us",
    "gender": "Female",
    "ip_address": "180.66.162.255"
  },
  {
    "id": 4,
    "first_name": "Willard",
    "last_name": "Valek",
    "email": "wvalek3@vk.com",
    "gender": "Male",
    "ip_address": "67.76.188.26"
  }
]

배열안에 4개의 객체가 들어가있음.

$.getJSON("user.json", function (data) {

console.log(data);

});

getJSON을 사용하면 JSON 타입을 가져올 수 있음.

이 배열들을 반복문을 사용해서 화면에 출력하기\

    $.getJSON("user.json", function (data) {
        //console.log(data);
        //화면에 출력하기 (반복문으로 가져옴)
        $.each(data, function (i, user) {
          console.log(i, user);
          $("ul#users").append(`<li>${user.first_name}</li>`); //벡틱 따옴표 써야함
        });
      });

AJAX 로 JSON 타입 가져오기

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

{JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Serving ~2 billion requests each month.

jsonplaceholder.typicode.com

https://jsonplaceholder.typicode.com/posts

posts 클릭

여기에 있는 내용들을 들고올거임

제이쿼리 JSON가져오기.html 복사해서 제이쿼리AJAX.html 생성

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 제이쿼리CDN -->
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="container">
      <div id="result"></div>
    </div>
    <script>
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/posts", //서버의 URL주소
        method: "GET", // HTTP 요청 방식(GET,POST)
        dataType: "json", // 서버에서 보내줄 데이터의 타입
      }).done(function (data) {
        // .done 위의 자료를 받는게 성공했을 경우
        console.log(data); //성공 시 데이터 콘솔로 출력
        $.each(data, function (i, item) {
          // 반복문 사용해서 화면출력
          $("#result").append(`<h3>${item.title}</h3><p>${item.body}</p>`);
        });
      });
    </script>
  </body>
</html>

콘솔에 100개 객체 들어온거 확인가능하고

화면 출력도 정상적으로 된 것이 확인된다.

'FRONTEND > 기타' 카테고리의 다른 글

AJAX 기본 개념 및 예제 (1)	2023.10.16
로또 번호 가져오기 (0)	2023.10.06
Dom 응용실습 (1)	2023.10.05
jQuery - event (0)	2023.10.05
jQuery ? (1)	2023.10.05

TEXT. HTML 파일 가져오기 load()

JSON 타입 가져오기

AJAX 로 JSON 타입 가져오기

'FRONTEND > 기타' 카테고리의 다른 글

티스토리툴바