Json과 ajax, ajax로 데이터 값 가져오기

Json 

: 데이터를 저장하거나 전송할때 많이 사용되는 경량의 DATA 교환 방식.

많은 양의 데이터를 주고 받기 쉽게 가볍게 만든 것이라고 생각하면 될 듯

 

 

ajax

: 자바스크립트를 이용한 비동기 통신, 클라이언트와 서버간에 xml 데이터를 주고 받는 기술.

퍼블리셔는 ajax를 이용해 데이터를 받아와 화면에 뿌려주어야 한다.

 

 

※ 비동기(async)방식이란?

비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식입니다. 이 방식의 장점은 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트 , 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만 비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있으므로 매우 큰 장점이 있습니다.

 

 

자세한 내용 참고

coding-factory.tistory.com/143

[Ajax] Ajax란 무엇인가?

 

 

 

 

문법

$.get(url[,data][,success][,dataType])

 

$.ajax({

  url: url,

  data: data,

  success: success,

  dataType: dataType

});

 

 

 

ex. 좌석명과 가격을 불러온다는 가정하에

// ajax 
$(function)(){
	var loadData; // json 데이터를 담는 변수
    $(".btn").click(function(){ // .btn 을 클릭했을 때
    	$(this).hide(); // 숨김
        
        // ajax의 기본 구조
        $.ajax({
        	url:"js/data.json", // ajax로 불러올 데이터의 url
            dataType:"json", // 데이터 타입을 적어주지 않으면 하나의 문자로 인식한다.
            
            // 성공했을 때
            success: function(result){ // result라는 변수에 데이터 변수를 담는다.
            	loadData = result.seatInfo; 
                loadSuccessFn(); // 성공했을 때 데이터를 담을 변수
            }
        
        });
    
    });
    
    // json 데이터를 가져온 이후 실행 될 함수
    function loadSuccessFn(){
    	for(var i=0; i<loadData.length; i++){ // 변수 i의 값, 조건, 증가
        	var n = loadData[i].name; // 변수 n = json 데이터 중 name
            var p = loadData[i].price; // 변수 p = json 데이터 중 price
            $(".list > ul").append('<li class="unit" data-price="'+p+'"><a href="#">'+n+'</a></li>');
        }
    
    }
};

 

 

 

api.jquery.com/jQuery.get/

jQuery.get() | jQuery API Documentation