JQuery ajax 사용법

1. GET 요청 예제

GET 요청은 서버에서 데이터를 조회할 때 사용됩니다.

$.ajax({
  url: "https://api.example.com/users", // 요청을 보낼 URL
  type: "GET", // HTTP 요청 방식
  data: { id: 123 }, // 서버로 보낼 데이터 (쿼리 파라미터로 전달)
  dataType: "json", // 서버로부터 받을 데이터 형식
  success: function(response) {
    console.log("요청 성공:", response); // 성공 시 실행
  },
  error: function(xhr, status, error) {
    console.error("요청 실패:", error); // 실패 시 실행
    console.error("상태 코드:", xhr.status); // HTTP 상태 코드 확인
  }
});

2. POST 요청 예제

POST 요청은 서버에 데이터를 생성하거나 전송할 때 사용됩니다.

$.ajax({
  url: "https://api.example.com/users", // 요청을 보낼 URL
  type: "POST", // HTTP 요청 방식
  contentType: "application/json", // 전송 데이터가 JSON 형식임을 명시
  data: JSON.stringify({ name: "John", age: 30 }), // JSON 문자열로 변환하여 전송
  success: function(response) {
    console.log("요청 성공:", response); // 성공 시 실행
  },
  error: function(xhr, status, error) {
    console.error("요청 실패:", error); // 실패 시 실행
    console.error("상태 코드:", xhr.status); // HTTP 상태 코드 확인
  }
});

3. JSON 데이터 수신 예제

서버에서 JSON 데이터를 받아와 처리하는 간단한 예제입니다.

$.ajax({
  url: "https://api.example.com/data", // 요청을 보낼 URL
  type: "GET", // HTTP 요청 방식
  dataType: "json", // 서버 응답 형식이 JSON임을 명시
  success: function(response) {
    console.log("수신한 데이터:", response); // JSON 데이터 출력
  },
  error: function(xhr, status, error) {
    console.error("요청 실패:", error); // 실패 시 실행
  }
});

4. 에러 처리와 상태 코드 확인

Ajax 요청의 실패 상황을 처리하고 상태 코드를 확인하는 예제입니다.

$.ajax({
  url: "https://api.example.com/data",
  type: "GET",
  success: function(response) {
    console.log("요청 성공:", response);
  },
  error: function(xhr, status, error) {
    console.error("요청 실패:", error);
    console.error("HTTP 상태 코드:", xhr.status); // 예: 404, 500
    console.error("서버 응답 메시지:", xhr.responseText); // 서버가 반환한 메시지
  }
});

5. 로딩 스피너와 함께 요청 처리

로딩 스피너를 표시하고 요청 완료 후 숨기는 예제입니다.

$.ajax({
  url: "https://api.example.com/data",
  type: "GET",
  beforeSend: function() {
    $("#loading").show(); // 로딩 스피너 표시
  },
  complete: function() {
    $("#loading").hide(); // 로딩 스피너 숨김
  },
  success: function(response) {
    console.log("요청 성공:", response);
  },
  error: function(xhr, status, error) {
    console.error("요청 실패:", error);
  }
});