ajax 요청

AJAX란 ?

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

GET/POST 요청하는 법?

• GET요청은 서버에 있던 데이터를 읽고싶을 때 주로 사용한다
• POST요청은 서버로 데이터를 보내고 싶을 때 사용한다.
• 서버는 유저데이터를 DB에 저장해주는 역할도 해도 한다.

Jquery로 요청하는법

get자리에는 post 도 들어갈수있다.

$.get('요청 URL')
  .done(function(data){ //성공했을때
    console.log(data)
  })
  .fail(function(error){ //실패했을때
    console.log('실패함')
  });

Javascript로 요청하는법

jQuery의 $.get() 이런건 JSON으로 자료가 도착하면 알아서 array/object 자료로 바꿔준다.
기본함수 fetch() 이런건 JSON으로 자료가 도착하면 알아서 array/object 자료로 바꿔주지 않는다.
그래서 fetch() 로 가져온 결과를 array/object로 바꾸고 싶으면 res.json() 이런 코드 한 줄 추가해야 한다.

fetch('요청 URL')
 .then(res => res.json())
 .then(function(data){
   console.log(data)
 })
 .catch(function(error){
   console.log('실패함')
 });

ajax예제

div 컨테이너 하나 만들고 컨테이너 안에 버튼을 생성 후 javascript로 카드 3장을 바로 출력한 후에 버튼을 클릭할때 마다 같은 카드 3장을 추가하고 , 한번 클릭할때 3장 추가한 후, 같은 버튼을 두번클릭 했을 때, 3장더 추가한 후에 버튼을 없앤다.

• 첫번째 버튼 url 주소 : https://codingapple1.github.io/js/more1.json
• 두번째 버튼 url 주소 : https://codingapple1.github.io/js/more2.json

풀어본 결과

HTML

<div class="container">
	<div class="row">
                
	</div>
</div>
<div class="container">
	<button class="btn btn-danger more">더보기</button>
</div>

Javascript

			let count = 0;
            $(".more").click(function () {
                count++;
                console.log(count);
                let dataMore = '';
                if (count <= 1) {
                    $.get("https://codingapple1.github.io/js/more1.json")
                        .done(function (data) {
                            data.forEach(function (v, i) {
                                dataMore = `<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>`
                                div.insertAdjacentHTML("beforeend", dataMore);
                            });
                        })
                        .fail(function () {
                            console.log("실패입니다.");
                        });
                        console.log("한번실행");
                    }else if (count >= 2) {
                        $.get("https://codingapple1.github.io/js/more2.json")
                        .done(function (data) {
                            data.forEach(function (v, i) {
                                dataMore = `<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>`
                                div.insertAdjacentHTML("beforeend", dataMore);
                            });
                        })
                        .fail(function () {
                            console.log("실패입니다.");
                        });
                        console.log("두번실행")

                        $(".more").css("display", "none")
                    }
                });