jQuery를 사용하여 PUT/DELETE 요청 보내기

2024-04-27

jQuery를 사용하여 PUT/DELETE 요청을 보내는 방법

PUT 요청은 서버에 리소스의 업데이트된 버전을 전송하는 데 사용됩니다. 예를 들어 사용자 프로필의 이름을 업데이트하려면 PUT 요청을 사용하여 업데이트된 이름을 포함하는 JSON 객체를 서버에 전송할 수 있습니다.

다음은 jQuery를 사용하여 PUT 요청을 보내는 방법의 예입니다.

$.ajax({
  url: '/users/123', // 업데이트할 사용자의 ID가 포함된 URL
  type: 'PUT', // 요청 유형을 PUT으로 설정
  data: {
    name: '새로운 이름' // 업데이트된 사용자 이름
  },
  success: function(data) {
    // 요청이 성공적으로 처리되면 호출되는 함수
    console.log('사용자 프로필이 업데이트되었습니다.');
  },
  error: function(error) {
    // 요청이 실패하면 호출되는 함수
    console.log('사용자 프로필 업데이트에 실패했습니다.');
  }
});

DELETE 요청은 서버에서 리소스를 삭제하는 데 사용됩니다. 예를 들어 사용자 프로필을 삭제하려면 DELETE 요청을 사용하여 해당 프로필의 ID를 서버에 전송할 수 있습니다.

$.ajax({
  url: '/users/123', // 삭제할 사용자의 ID가 포함된 URL
  type: 'DELETE', // 요청 유형을 DELETE로 설정
  success: function(data) {
    // 요청이 성공적으로 처리되면 호출되는 함수
    console.log('사용자 프로필이 삭제되었습니다.');
  },
  error: function(error) {
    // 요청이 실패하면 호출되는 함수
    console.log('사용자 프로필 삭제에 실패했습니다.');
  }
});

주의 사항

일부 브라우저는 기본적으로 PUT 및 DELETE 요청을 지원하지 않을 수 있습니다. 이러한 브라우저에서 이러한 요청을 보내려면 jQuery의 ajax 메서드의 xhr 옵션을 사용하여 XMLHttpRequest 객체를 수동으로 구성해야 할 수도 있습니다.

자세한 내용은 jQuery 문서를 참조하십시오.




예제 코드: jQuery를 사용하여 PUT 요청 및 DELETE 요청 보내기

다음은 더 구체적인 예제 코드입니다.

예제 1: 사용자 프로필 업데이트(PUT 요청)

이 예제에서는 jQuery를 사용하여 사용자 프로필의 이름을 "새로운 이름"으로 업데이트하는 방법을 보여줍니다.

$(document).ready(function() {
  // 업데이트할 사용자의 ID
  const userId = 123;

  // 업데이트된 사용자 이름
  const newUserName = "새로운 이름";

  // PUT 요청을 사용하여 사용자 프로필 업데이트
  $.ajax({
    url: `/users/${userId}`,
    type: 'PUT',
    data: {
      name: newUserName
    },
    success: function(data) {
      console.log('사용자 프로필이 업데이트되었습니다.');
    },
    error: function(error) {
      console.log('사용자 프로필 업데이트에 실패했습니다.');
    }
  });
});
$(document).ready(function() {
  // 삭제할 사용자의 ID
  const userId = 123;

  // DELETE 요청을 사용하여 사용자 프로필 삭제
  $.ajax({
    url: `/users/${userId}`,
    type: 'DELETE',
    success: function(data) {
      console.log('사용자 프로필이 삭제되었습니다.');
    },
    error: function(error) {
      console.log('사용자 프로필 삭제에 실패했습니다.');
    }
  });
});
  • 이 예제 코드는 기본적인 PUT 및 DELETE 요청을 보내는 방법을 보여주는 데만 사용됩니다.
  • 실제 응용 프로그램에서는 에러 처리, 인증 및 권한 부여와 같은 추가 코드가 필요할 수 있습니다.
  • 요청을 보내기 전에 서버 API 문서를 참조하십시오.



jQuery 없이 PUT 및 DELETE 요청 보내기

XMLHttpRequest(XHR)은 브라우저와 서버 간의 통신을 위한 기본 JavaScript API입니다. jQuery는 실제로 XHR을 사용하여 백엔드와 통신하는 데 사용됩니다.

const xhr = new XMLHttpRequest();
xhr.open('PUT', '/users/123');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('사용자 프로필이 업데이트되었습니다.');
  } else {
    console.error('사용자 프로필 업데이트에 실패했습니다.');
  }
};
xhr.send(JSON.stringify({ name: '새로운 이름' }));

Fetch API는 자바스크립트에서 비동기 네트워크 요청을 처리하는 또 다른 현대적인 방법입니다.

fetch('/users/123', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: '새로운 이름' })
})
.then(response => response.json())
.then(data => console.log('사용자 프로필이 업데이트되었습니다.'))
.catch(error => console.error('사용자 프로필 업데이트에 실패했습니다.'));

위의 예제에서와 같이 XHR 및 Fetch API를 사용하면 요청 헤더, 본문 및 오류 처리를 직접 제어할 수 있습니다.

이 방법은 jQuery보다 더 복잡할 수 있지만, 더 많은 유연성과 제어 기능을 제공합니다.

선택하는 방법

jQuery, XHR 또는 Fetch API 중 어떤 것을 사용할지는 개인의 선호와 프로젝트의 특정 요구 사항에 따라 다릅니다.

jQuery는 사용하기 쉽고 빠른 시작을 제공하지만, XHRFetch API는 더 많은 제어 기능과 유연성을 제공합니다.

새로운 프로젝트를 시작하는 경우 Fetch API를 사용하는 것이 좋습니다. 이미 jQuery에 익숙하고 프로젝트에 jQuery가 포함되어 있다면 jQuery를 사용하는 것이 합리적일 수 있습니다.


jquery httprequest put


Google CDN의 jQuery를 사용하면서도 안전하게 폴백하는 방법

사용 기술:jQuery: JavaScript 라이브러리CDN (Content Delivery Network): 콘텐츠를 빠르게 전송하기 위한 서버 네트워크Google-ajax-libraries: Google에서 제공하는 CDN 서비스...


마우스 왼쪽/오른쪽 클릭 구분

이벤트 처리기 설정:설명:$(document).on('click', function(e)): 문서에 클릭 이벤트 리스너를 설정합니다.e.which: 마우스 버튼 정보를 포함하는 이벤트 객체 속성입니다.e.which == 1: 왼쪽 버튼인 경우 true를 반환합니다...


예제 코드: JavaScript, jQuery, Moment.js를 사용한 UTC 날짜/시간 변환

따라서 서버에서 받은 UTC 날짜/시간을 사용자의 로컬 시간대로 변환하여 표시하는 것이 중요합니다. 이를 위해 JavaScript, jQuery, DateTime 라이브러리를 활용하여 간편하게 변환할 수 있습니다.가장 간단한 방법은 JavaScript의 기본 Date 객체를 사용하는 것입니다...


jQuery, Modal Dialog 및 Twitter Bootstrap를 사용하여 Twitter Bootstrap Modal 닫기에 함수 바인딩하기

이 문서에서는 jQuery, Modal Dialog 및 Twitter Bootstrap를 사용하여 Twitter Bootstrap Modal 닫기에 함수를 바인딩하는 방법을 설명합니다.필수 조건jQuery 설치Twitter Bootstrap 설치...


jquery httprequest put