[jquery] ajax()

🐲ajax()old 문법

 $.ajax( { 
  url  : loc,
  data : ,
  success : function( data ) {   // responseXML
  },
  error : function(xhr, status, error) {
  }
})

• url (필수): 요청을 보낼 URL을 지정
• data (선택): 서버에 객체 형태로 제공되며, 쿼리 문자열 형식으로 변환된다.
• success (선택): 요청이 성공적으로 완료되었을 때 서버에서 반환된 데이터를 매개변수로 받는다.
• error (선택):요청이 실패했을 때 호출되는 콜백 함수입니다. 이 함수는 세 가지 매개변수를 받을 수 있다:
• xhr: XMLHttpRequest 객체
• status: 오류 상태 (예: "timeout", "error", "abort", "parsererror")
• error: 오류 메시지

🐲예제 (ajax old문법)

$.ajax({
    url: 'https://api.example.com/data', // 요청할 URL
    type: 'GET', // 요청 방식
    data: { id: 123 }, // 서버에 전송할 데이터
    success: function(data) {
        console.log('성공:', data); // 성공 시 처리할 코드
    },
    error: function(xhr, status, error) {
        console.error('오류:', status, error); // 실패 시 처리할 코드
    }
});

위의 예제에서는 https://api.example.com/data로 GET 요청을 보내며, id: 123라는 데이터를 객체형태의 쿼리 문자열 형식으로 전송한다.
요청이 성공하면, 서버에서 반환한 data를 콘솔에 출력하고, 실패하면 오류 정보를 출력한다.
 
🐲 ajax() new문법

$.ajax( { 
       url   : loc, 
       data  : 
      ,type  : 'GET' or 'POST'
      , async : true
          } ) //AJAX에 객체를 부여
  .done( function(data) {
      } )
  .fail( function(xhr) { 
})

• type (선택):요청의 HTTP 메서드를 지정한다. 기본값은 GET이며 POST, PUT, DELETE 등 다른 메서드도 사용할 수 있다.

 
🐲 예제(ajax new문법)
 

See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.

switch (this.id) {
case "dec":
	if (val > $('#num').prop('min')) //property
		val--;
	break;
case "inc":
	if (val < $('#num').attr('max')) //attribute
		val++;
	break;
}

📍클릭된 버튼의 ID에 따라 다른 동작을 수행한다.
📍 id가 감소할 때: num의 value값을 감소시킨다.
📍id가 증가할 때: num의 value값을 증가시킨다.
📍prop==attr

$.ajax({
	url : loc + $('#num').val(),
	method:'get'
}).done(function(result) {

📍 Ajax 요청을 보내어, 입력 필드의 현재 값에 해당하는 제품 정보를 가져온다.
📍 요청이 성공하면 .done() 메서드가 호출되어 결과를 처리한다.
 

let data = result.data;
let html = '<ul>';
html += '<li>id:' + data.id + '</li>';
html += '<li>name:' + data.name + '</li>';
html += '<li>year:' + data.year + '</li>';
html += '<li>color:' + data.color + '</li>';
html += '<li>pantone_value:' + data.pantone_value + '</li>';
html += '</ul>';

📍 각 DATA의 텍스트를 리스트로 추가한다.
 

}).fail(function(xhr) {
	alert(xhr.status + '' + xhr.textStatus);
});

📍 요청이 실패할 경우 .fail() 메서드가 호출되어 오류 메시지를 알림창으로 표시한다.. xhr.status와 xhr.textStatus를 사용하여 오류 상태를 출력한다.