[JavaScript]Ajax(에이젝스)

[JavaScript]Ajax(에이젝스)

Ajax

서버에 데이터를 요청할 때 리로드 하지 않고 받아오는 기술.

GET 요청하는 방법

            $.ajax({
                url : "http://localhost:8080/board",
                type : "GET"
            }).done(function(){
                // 요청 후에 실행할 코드
             }).fail(function(){
                // ajax 요청이 실패했을 때 실행되는 코드
            }).always(function(){
                // ajax 요청이 실패하든 성공하든 항상 실행되는 코드
            });

예제로 이해하기

         $('#data-bind').click(function(){
            
            $.ajax({
                url : 'https://codingapple1.github.io/data.json',
                type : 'GET',
                //data : '...'
            }).done(function(data){ //가져온 데이터 확인하기 
                $('.card-title').html(data.model);
                $('.card-text').html(data.price);
                $('.card-img-top').attr('src', data.img);
                // $('#hello').html(data);
            }).fail(function(){
                //ajax 요청에 실패했을 때 실행할 코드
            }).always(function(){
                //ajax 요청에 실패하든 성공하든 항상 실행할 코드 (예: 로딩중)
            });
         });