[jQuery] AJAX 기본 사용법

서버와의 통신을 하기 위해서 ajax 를 사용하는데, 쉽고 편하게 잘 만들어져 있습니다.

 

기본 틀은

$.ajax({
  type: 'GET or POST',
  url: '요청 보낼 url',
  error: function(request, status, error) {},
  success: function(data) {}
});

단순히 데이터만 받아오면 될 경우에는 GET을 사용하고 파라미터를 넘겨줘야 될 경우라면 POST 를 사용하는게 좋습니다.

 

url 의 경우에는 절대경로를 사용해서 요청을 하는 게 좋습니다.

 

error의 경우 요청이 실패했을 때 이유를 확인하기 위한 용도로 사용할 수 있는데요

request.status 를 출력하면 에러 코드가 나오고

request.responseText 를 출력하면 에러 메세지가 나옵니다.

 

success 부분에서는 정상적으로 데이터를 불러왔을 때 처리할 것들을 작성하면 됩니다.

 

보통 json 으로 데이터를 받기 때문에 간단히 사용법을 말씀드리자면

 

// 서버 리턴값이
// [{name: 'name1'}, {name: 'name2'}, {name: 'name2'}, ...]
// 와 같은 데이터 일 때

$.ajax({
  type: 'GET',
  url: 'xrexter.tistory.com/names.php',
  error: function(request, status, error) {
    alert(request.status);
  },
  success: function(data) {
    var json = JSON.parse(data);
    
    for (var i=0; i<json.length; i++) {
      console.log(json[i].name);
    }
  }
});

// name1, name2, name3, ... 차례로 로그 기록합니다.

POST 방식으로 파라미터 값을 보내고 받아와야 할 경우에는

 

// 서버 리턴값이
// [{name: 'name1'}, {name: 'name2'}, {name: 'name2'}, ...]
// 와 같은 데이터 일 때

$.ajax({
  type: 'GET',
  url: 'xrexter.tistory.com/names.php',
  data: {
	data1: 'data1',
	data2: 'data2'
  },
  error: function(request, status, error) {
    alert(request.status);
  },
  success: function(data) {
    var json = JSON.parse(data);
    
    for (var i=0; i<json.length; i++) {
      console.log(json[i].name);
    }
  }
});

// name1, name2, name3, ... 차례로 로그 기록합니다.

이와 같이 하면 됩니다.