Ajax

웹툰을 보고 싶다

웹툰서버에 웹툰의 데이터를 요청 

데이터의 url 기재함

GET 요청하면 웹툰 데이터줌 (가까운 GET요청으로는 브라우저 위에 주소창이 있음)

 

GET - 데이터를 읽을 때

POST - 데이터를 보낼 때 (form 태그 사용)

 

다음 요청을 하면 페이지가 새로고침이 된다 

 

ajax  - 새로고침 없이 데이터를 주고 받을 수 있음

 

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

다음같이 GET 요청을 했다

그럼 다음 url 에 있는 데이터를 가져온다 

(처음에 계속 오류가 났는데 jquery를 slim 버전이라 발생했다. 아닌 버전으로 다시 깔면됨)

 

 

 

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

이렇게 POST 요청을 함 

파라미터에 보내고 싶은 데이터를 씀 

댓글, 로그인 정보등을 보냄 

 

서버가 연결안됐거나, url 을 잘못입력할때 post 요청이 실패하는 경우가 있는데 이 때 다음같이 콜백함수를 실행함.

 

$.post('https://codingapple1.github.io/hello.txt',{name: 'kim'}).done(function(data){
    console.log(data)
  }).fail(fuction(){
   console.log('실패함')
  })

 

*axios : ajax 편하게 할때 쓰는 라이브러리

 

 

 

과제 

 <div class="col-sm-4">
        <img src="https://via.placeholder.com/600" class="w-100">
        <h5>title</h5>
        <p>price</p>
</div>

다음 같은 카드블록 버튼 누르면 3개 생성하기

 

https://via.placeholder.com/600

이 url 에 3개의 데이터 담겨 있음

너무 오랜만에 해서 js로 html 생성하기, 문자열에 변수 넣기등 다 까먹어서 풀이를 보았다.

 

1. 먼저 버튼을 만든다

2.데이터를 가져옴 

3. 그 데이터를 html 에 담음 

4. 그 html 생성하고 

5. 3개의 반복이니 반복문을 사용(가져온 데이터는 배열이므로 foreach문 사용하면 유용)

 

$('#more').click(function(){

$.get('https://codingapple1.github.io/js/more1.json').done(function(data){
    data.forEach((a,i) => {

        var box = ` <div class="col-sm-4">
        <img src="https://via.placeholder.com/600" class="w-100">
        <h5>${data[i].title}</h5>
        <p>가격 : ${data[i].price}</p>
        </div>`;
        
        $('.container').append(box);
        
        
        
    });
  })

})

 

foreach 메서드의 두번째 인자가 하나씩 증가하는 정수인걸 이용해서 가져온 데이터에 차례로 접근