[AJAX] Jquery 사용

---

 

1.Jquery를 AJAX사용한 GET요청

Jquery를 통해 AJAX를 더 간단하게 작성할수있다.

$.ajax({
    url: '서버의_URL', // 요청할 URL
    type: 'GET', // 요청 방식
    dataType: 'json', // 예상되는 응답 데이터 형식
    success: function(response) {
        // 요청 성공 시 실행되는 콜백 함수
        console.log(response);
    },
    error: function(xhr, status, error) {
        // 요청 실패 시 실행되는 콜백 함수
        console.error(error);
    }
});

 

만약 사용안했을경우 다음과같은 코드로 작성해야한다.

var xhr = new XMLHttpRequest();
xhr.open('GET', '서버의_URL', true); // 요청 초기화
xhr.responseType = 'json'; // 응답 형식 설정

xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        // 요청 성공 시
        console.log(xhr.response); // JSON 데이터 출력
    } else {
        // 요청 실패 시
        console.error('Error:', xhr.statusText);
    }
};

xhr.onerror = function() {
    console.error('Request failed'); // 요청 실패 처리
};

xhr.send(); // 요청 전송

 

 

 

 

 

 

2.Jquery를 AJAX사용한 POST요청

$.ajax({
    url: '서버의_URL', // 요청할 URL
    type: 'POST', // 요청 방식
    data: {
        key1: 'value1',
        key2: 'value2'
    },
    dataType: 'json', // 예상되는 응답 데이터 형식
    success: function(response) {
        // 요청 성공 시 실행되는 콜백 함수
        console.log(response);
    },
    error: function(xhr, status, error) {
        // 요청 실패 시 실행되는 콜백 함수
        console.error(error);
    }
});

 

 

 

 

 

 

3.예시

function loadData4() {
    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/posts/1',
        type: 'GET',
        dataType: 'json',
        success: function (response) {
            $('#result4').html('<h3>' + response.title + '</h3><p>' + response.body + '</p>');
        },
        error: function (xhr, status, error) {
            console.error('Error:', error);
        }
    });
}