[JS] Ajax 정리 (1)

728x90

GET / POST 비교

GET요청 - 서버에 있던 데이터를 읽고싶을 때

POST요청 - 서버로 데이터를 보내고 싶을 때

GET, POST 요청을 저렇게 날리면 , 브라우저가 새로고침된다.

= Ajax 사용하기

AJAX란?
- 서버에 GET, POST 요청을 할 때
새로고침 없이 데이터를 주고받을 수 있게 도와주는 브라우저

jQuery로 AJAX요청하기

GET 요청

$.get('https://codingapple1.github.io/hello.txt');

여기 경로 데이터 갖고옴

$.get('https://codingapple1.github.io/hello.txt').done(function(data){
  console.log(data)
});

데이터 확인하기

= .done 아니면 .then 뒤에 붙이고 콜백함수넣고 파라미터 하나 만들기

done 안에 콜백 함수는 왜 쓰고, 무엇보다 function 안에 들은 data는 뭘까

done 안에 콜백 함수

done()메서드는 AJAX 요청이 성공적으로 완료되었을 때 실행될 콜백 함수를 지정하는 메서드
AJAX 요청이 완료되면, 서버에서 반환된 데이터가 이 콜백 함수에 전달

function(data) { ... }
= 콜백함수 부분

$.get('https://codingapple1.github.io/hello.txt').done(function(data){
  console.log(data)
});

$.get('https://codingapple1.github.io/hello.txt'):
이 부분은 https://codingapple1.github.io/hello.txt URL로 GET 요청을 보냄.

function(data) { console.log(data) }
이 콜백 함수는 인수로 전달된 데이터를 data라는 이름으로 받음.

console.log(data)
를 통해 이 데이터를 콘솔에 출력

콜백 함수 / data 의 사용

done 안에 콜백 함수를 쓰는 이유는, AJAX 요청이 성공적으로 완료된 후에 어떤 작업을 수행하기 위함

function(data)의 data는 서버에서 반환된 데이터를 의미

이 함수의 data라는 파라미터는 서버에서 반환된 데이터를 받기 위해 사용

AJAX 요청이 성공적으로 완료되었을 때, 서버에서 반환된 데이터를 콜백 함수에 전달합니다.
이 데이터는 콜백 함수의 파라미터로 전달

왜 파라미터를 사용하는가?
= 파라미터는 함수가 호출될 때 전달된 값을 받기 위해 사용

POST 요청

$.post('url~~', {name : 'kim'})

$.post("https://codingapple1.github.io/hello.txt", { name: "kim" }).done(
  function (data) {
    console.log(data);
  }
);

얘도 .done 아니면 .then 가능

두 번째 파라미터로 보낼 데이터 적기

- {name : 'kim'}

ajax 실패시 코드실행
- .fail 사용

$.get('https://codingapple1.github.io/hello.txt')
  .done(function(data){
    console.log(data)
  })
  .fail(function(error){
    console.log('실패함')
  });

ajax 요청이 실패했을 때 아래 코드 실행됨.

ajax 요청 성공시 .done 안에 있는 코드를 실행해줍니다.

ajax 요청 실패시 .fail 안에 있는 코드를 실행해줍니다

done/fail 말고 then/catch 써도 된다.

상품가격 데이터 갖고오기

https://codingapple1.github.io/price.json 여기로 GET요청하면 오늘의 상품가격을 알려줌

$.get("https://codingapple1.github.io/price.json")
  .done(function (data) {
    console.log(data);
  })
  .fail(function (error) {
    console.log("실패함");
  });

{price:5000}

이렇게 object 사용해서 잘 뜨는거 확인 가능

data 는 시작이 중괄호로 시작되므로

object 를 사용했다는 걸 알 수 있다.

5000 만 출력하고싶은 경우

key 를 뽑아내면 value 값 나옴

$.get("https://codingapple1.github.io/price.json")
  .done(function (data) {
    console.log(data.price);
  })
  .fail(function (error) {
    console.log("실패함");
  });

  console.log(data["price"]);

data.price

또는

data["price"] 를 사용하면 값만 나온다.

(object 배열 에서 배움.)

그냥 자바스크립트로 AJAX요청하기
- fetch 사용

fetch('https://codingapple1.github.io/price.json')
  .then(res => res.json())
  .then(function(data){
    console.log(data)
  })
  .catch(function(error){
    console.log('실패함')
  });

.then(res => res.json())

done 이나 then 한 줄 이 더 필요함.

서버와 데이터를 주고받을 때는 문자만 주고받을 수 있다 ( array / object 이런거 안됨 )

JSON은 문자로 인식 - 뽑아쓰기 어려움

json 자료를 array / object 로 변환하고 싶으므로.

jQuery의 $.get() 이런건 JSON으로 자료가 도착하면 알아서 array/object 자료로 바꿔줌

기본함수 fetch() 이런건 JSON으로 자료가 도착하면 알아서 array/object 자료로 바꿔주지 않음

fetch() 로 가져온 결과를 array/object로 바꾸고 싶으면 res.json() 이런 코드 한 줄 추가

Ajax 2 : 상품 더보기 버튼 만들기

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="main.css" />
    <title>Hello, world!</title>
  </head>
  <body>
      <!-- -- 13-1) Ajax -->
    <div class="container">
      <div class="row">
        <div class="col-sm-4">
          <img src="https://via.placeholder.com/600" class="w-100" />
          <h5>Card title</h5>
          <p>가격 : 70000</p>
        </div>
      </div>
    </div>
    <!-- 스크립트 -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
      integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
    <script src="list.js"></script>
  </body>
</html>

Javascript

var products = [
  { id: 0, price: 70000, title: "Blossom Dress" },
  { id: 1, price: 50000, title: "Springfield Shirt" },
  { id: 2, price: 60000, title: "Black Monastery" },
];

자바스크립트를 이용해서 카드레이아웃을 3개 생성
- html 생성해주는
.append() 사용해서 만들기

- append는 안쪽 맨 밑에 추가

var a = '<p>안녕</p>';
  $('#test').append(a);

실제 상품에 제목 넣어보고 싶으면

var products = [
  { id: 0, price: 70000, title: "Blossom Dress" },
  { id: 1, price: 50000, title: "Springfield Shirt" },
  { id: 2, price: 60000, title: "Black Monastery" },
];
var 템플릿 = `
  <div class="col-sm-4">
    <img src="https://via.placeholder.com/600" class="w-100" />
    <h5>Card title</h5>
    <p>가격 : 70000</p>
  </div>
`;
$(".row").append(템플릿);

다음과 같이

변수 (템플릿) 을 생성해준다.

백틱 사용

작은 따옴표나 큰 따옴표 대신에 백틱을 사용하여 문자열을 생성하면 더욱 편리하게 여러 줄의 문자열을 작성할 수 있고, 변수를 쉽게 삽입할 수 있다

작은따옴표 사용

// 변수 선언
let name = 'John';
let age = 30;

// 작은 따옴표 사용
let greeting = '안녕하세요, 저는 ' + name + '이고, ' + age + '살입니다.';

console.log(greeting);

백틱 사용

// 변수 선언
let name = 'John';
let age = 30;

// 템플릿 리터럴 사용
let greeting = `안녕하세요, 저는 ${name}이고, ${age}살입니다.`;

console.log(greeting);

문자 중간에 변수 쉽게 넣기

${} 사용

var products = [
  { id: 0, price: 70000, title: "Blossom Dress" },
  { id: 1, price: 50000, title: "Springfield Shirt" },
  { id: 2, price: 60000, title: "Black Monastery" },
];


var 템플릿 = `
  <div class="col-sm-4">
    <img src="https://via.placeholder.com/600" class="w-100" />
    <h5>${products[0].title}</h5>
    <p>가격 : 70000</p>
  </div>
`;
$(".row").append(템플릿);

타이틀에 하드코딩하지 않고 변수 넣어주면

${products[0].title} 이거 넣어주면 된다.

${products[0]["title"]} 이거도 가능

[] = array {} = object

그럼 다음과 같이 바뀐거 확인 가능.

var products = [
  { id: 0, price: 70000, title: "Blossom Dress" },
  { id: 1, price: 50000, title: "Springfield Shirt" },
  { id: 2, price: 60000, title: "Black Monastery" },
];
var 템플릿 = `
  <div class="col-sm-4">
    <img src="https://via.placeholder.com/600" class="w-100" />
    <h5>${products[0]["title"]}</h5>
    <p>가격 : ${products[0].price}</p>
  </div>
`;
$(".row").append(템플릿);

가격도 바꿔주기

728x90

저작자표시 비영리 변경금지

'> 메모 > JS' 카테고리의 다른 글

[JS] arrow function 문법 (화살표 함수) (0)	2024.04.07
[JS] Ajax 정리 (2) (1)	2024.04.05
[JS] forEach, for in 반복문 (0)	2024.04.02
[JS] 자바스크립트로 html 태그 생성 (0)	2024.04.02
[JS] Select 태그 다루기 (0)	2024.04.02

IT 아카이브

[JS] Ajax 정리 (1)

'> 메모 > JS' 카테고리의 다른 글

티스토리툴바

[JS] Ajax 정리 (1)

'> 메모 > JS' 카테고리의 다른 글

관련글

티스토리툴바