[jquery] ajax()

2024. 9. 25. 07:30·JAVACSCRIPT
반응형

🐲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를 사용하여 오류 상태를 출력한다.

반응형

'JAVACSCRIPT' 카테고리의 다른 글

[jquery] Axios와 Fetch  (0) 2024.09.26
[jquery]비동기호출 - $.get()  (0) 2024.09.25
[js]데이터 처리 및 클라이언트 저장 방식(동기∙비동기 호출)  (3) 2024.09.23
[json] json 사용하기  (0) 2024.09.21
[jquery]jquery 사용하기  (3) 2024.09.19
'JAVACSCRIPT' 카테고리의 다른 글
  • [jquery] Axios와 Fetch
  • [jquery]비동기호출 - $.get()
  • [js]데이터 처리 및 클라이언트 저장 방식(동기∙비동기 호출)
  • [json] json 사용하기
라텐느
라텐느
이제 막 개발을 시작한 초보가 개인공부를 하는 공간입니다.
  • 라텐느
    괴발개발
    라텐느
    • 개발자 (154)
      • HTML|CSS (14)
      • JAVA (29)
      • JAVACSCRIPT (15)
      • SQL (16)
      • 기타 (5)
      • JSP (2)
      • SPRING (13)
      • SPRING BOOT (6)
      • Git&GitHub (1)
      • 시행착오 (2)
      • 개발일지 (35)
        • GreenMiniProject1 (12)
        • GreenMiniProject2 (9)
        • GreenFinalProject (14)
      • Flutter (5)
      • 자격증 (0)
        • SQLD (1)
      • AWS (2)
      • Linux (1)
      • 자료구조&알고리즘 (4)
  • 블로그 메뉴

    • 홈
    • 방명록
    • 태그
  • 링크

    • GitHub
  • 공지사항

  • 인기 글

  • 태그

    개발자
    db
    HTML
    CSS
    링크
    JS
    JQuery
    tag
    input
    SQL
    오블완
    javascript
    자기계발
    티스토리챌린지
    java
    태그
    일지
    AJAX
    부트캠프
    link
  • 최근 댓글

  • 최근 글

  • 반응형
  • hELLO· Designed By정상우.v4.10.0
라텐느
[jquery] ajax()
상단으로

티스토리툴바