티스토리 뷰

유료강의/국비지원

웹퍼블리셔 활용 9일차 - ajax, fetch

2021bong 2021. 10. 25. 19:27 
// data.json
{
    "work":[
        {
            "name":"프로젝트1", 
            "date":"2021.06",
            "img":"./img/img-04.jpg",
            "detail":"프로젝트1(상세설명)"
        },
        {
            "name":"프로젝트2", 
            "date":"2021.07",
            "img":"./img/img-05.jpg",
            "detail":"프로젝트2(상세설명)"
        },
        {
            "name":"프로젝트3", 
            "date":"2021.08",
            "img":"./img/img-06.jpg",
            "detail":"프로젝트3(상세설명)"
        }
    ]
}

객체는 키값이 필요, 바로 [배열]을 쓸 수는 없음

const value = {
  work:[
    100,
    200,
    300
  ]
};
console.log(value);
console.log(value.work);
value.work.forEach(function(v) {
  console.log(v)
});
console.log(value.work[0]);
console.log(value.work[1]);
console.log(value.work[2]);

원하는 데이터를 불러오는 방법 > 위치가 중요함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script defer src="./common2.js"></script>
</head>
<body>

  <article>
    <h2>work list</h2>
    <div>
      <!-- <figure>
        <img src="../img/img-04.jpg">
        <figcaption>
          <span>이미지제목</span>
          <span>2021-10-25</span>
        </figcaption>
      </figure> -->
    </div>
  </article>
  <p>모달창</p>

    <style>
      *{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      div{
        display: flex;
        justify-content: space-between;
      }
      figure{
        width: 30%;
        border: 1px solid #000;
        padding: 30px;
      }
      img{
        width: 100%;
      }
      p{
        position: fixed;
        left: 50%;
        top: 50%;
        background: #fff;
        border: 1px solid #000;
        padding: 60px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        transform: translate(-50%, -50%);
        display: none;
      }
      p.active{
        display: block;
      }
    </style>

</body>
</html>

-제이쿼리

// 제이쿼리 ajax 기본형식
$.ajax({
  url:'./data.json',
  success:function(data){
    console.log(data)
  },
  error:function(){
    alert('error')
  }
});

데이터를 넣은 html태그 추가하기

$.ajax({
  url: './data.json',
  success: function (data) {
    let item = ''; // 변수선언
    data.work.forEach(v => { // 데이터 반복문 돌리기
      item = `
      <figure>
        <img src="${v.img}">
        <figcaption>
          <span>${v.name}</span>
          <span>${v.date}</span>
        </figcaption>
      </figure>`; // 받아온 데이터를 알맞은 html 태그에 위치시키기
      $('div').append(item); // html 태그 추가
    });
  }
});

이미지를 클릭하면 설명이 나오게 하기

$.ajax({
  url: './data.json',
  success: function (data) {
    let item = '';
    data.work.forEach(v => {
      item = `
      <figure>
        <img src="${v.img}">
        <figcaption>
          <span>${v.name}</span>
          <span>${v.date}</span>
        </figcaption>
      </figure>`;
      $('div').append(item);
    });
    //event 클릭 이벤트
    $('div figure').on('click', function () {
      let idx = $(this).index();
      $('p')
        .text(data.work[idx].detail)
        .addClass('active');
      $('p').on('click', function () {
        $(this).removeClass('active');
      });
    })
  }
});

-바닐라

// 바닐라 fetch 기본형식
fetch('http://example.com/movies.json') // url로 데이터 호출
  .then(function(response) { // response가 문자(string)로 들어옴
    return response.json(); // json메소드로 스크립트가 읽을수 있는 언어로 변환
  })
  .then(function(myJson) { // 위에서 return된 값이 들어옴
    console.log(JSON.stringify(myJson)); // 이제 여기서 사용
  });
  
// 에러를 받아올 때
.catch()
// 기본 함수표현식
.then(function(res){return res.json()})

// 화살표 함수
.then(res=>res.json())

// 같은 코드임

데이터를 넣은 html태그 추가하기

바닐라에서는 .append가 html태그가 아니라 텍스트가 입력됨

fetch('./data.json')
  .then(res => res.json())
  .then(data => {
    const elDiv = document.querySelector('div');
    let items = '';
    data.work.forEach(v => {
      items += `
      <figure>
      <img src="${v.img}">
      <figcaption>
      <span>${v.name}</span>
      <span>${v.date}</span>
      </figcaption>
      </figure>`
    });
    elDiv.innerHTML = items;
  })
const elModal = document.querySelectorAll('p');

// p 태그에 active 클래스 추가
elModal.className = 'active'; // p 태그에 있는 모든 클래스의 값을 말함, active 클래스만 남음
elModal.classList.add('active'); // p 태그에 있는 클래스 목록에 active 클래스 추가, 여러 클래스가 남음

// 그 외
// remove(삭제),toggle,contains(true, false)(포함을 확인, 조건만들 때)
// 가 있음

이미지를 클릭하면 설명이 나오게 하기

fetch('./data.json')
  .then(res => res.json())
  .then(data => {
    const elDiv = document.querySelector('div');
    let items = '';
    data.work.forEach(v => {
      items += `
      <figure>
      <img src="${v.img}">
      <figcaption>
      <span>${v.name}</span>
      <span>${v.date}</span>
      </figcaption>
      </figure>`
    });
    elDiv.innerHTML = items;

    // event
    const elFigure = document.querySelectorAll('figure');
    const elModal = document.querySelector('p');

    elFigure.forEach((item, key)=>{ // 2번째 인자로 key값을 받아 올 수 있음
      item.addEventListener('click', function(){
        elModal.classList.add('active');
        elModal.innerHTML = data.work[key].detail;
      });
    })

    elModal.addEventListener('click', function(){
      this.classList.remove('active');
    })
  })
728x90
저작자표시

'유료강의 > 국비지원' 카테고리의 다른 글

웹퍼블리셔 활용 10일차 - 평가, matchMedia, 자바스크립트 플러그인  (0) 2021.10.26
웹퍼블리셔 활용 8일차 - 스토리지+로드 예제 1, 2, 3  (0) 2021.10.21
웹퍼블리셔 활용 7일차 - 폼 예제 6, 7, 8  (0) 2021.10.20
웹퍼블리셔 활용 6일차 - 폼 예제 3, 4, 5  (0) 2021.10.19
웹퍼블리셔 활용 5일차 - 폼 예제 1, 2  (0) 2021.10.18
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함