[javascript] SweetAlert와 AJAX 통신 사용 방법

24 Nov 2023

javascript

이번 글에서는 SweetAlert와 AJAX 통신을 함께 사용하는 방법에 대해 알아보겠습니다. SweetAlert는 간편하게 사용자에게 알림을 보여주기 위해 사용되며, AJAX는 비동기적으로 서버와 통신하기 위해 사용됩니다.

SweetAlert란?

SweetAlert는 사용자에게 예쁘고 사용하기 쉬운 알림 창을 제공하는 라이브러리입니다. SweetAlert는 일반적인 모달 창보다 보기 좋고 풍부한 기능을 제공합니다.

AJAX란?

AJAX는 Asynchronous JavaScript and XML의 약자로, JavaScript를 사용하여 비동기적으로 서버와 통신할 수 있는 기술입니다. AJAX를 사용하면 페이지의 전체 새로고침 없이 서버와 데이터를 주고받을 수 있습니다.

SweetAlert와 AJAX 통신을 함께 사용하는 방법

SweetAlert와 AJAX를 함께 사용하기 위해서는 다음 단계를 따르십시오:

SweetAlert 라이브러리를 프로젝트에 추가합니다. 아래의 코드를 HTML 파일의 <head> 태그 안에 추가하면 SweetAlert를 사용할 수 있습니다.

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

AJAX 통신을 위한 JavaScript 코드를 작성합니다. 아래의 예시 코드는 AJAX를 사용하여 서버로 데이터를 전송하는 방법을 보여줍니다.

function sendDataToServer(data) {
  // AJAX 통신을 위해 XMLHttpRequest 객체를 생성합니다.
  var xhr = new XMLHttpRequest();

  // 서버로 보낼 데이터를 설정합니다.
  var params = "data=" + data;

  // 서버의 응답을 처리하는 함수를 등록합니다.
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      // 서버 응답이 성공적으로 받아졌을 때 SweetAlert를 사용하여 알림을 보여줍니다.
      swal("성공!", "데이터가 성공적으로 전송되었습니다.", "success");
    } else if (xhr.readyState === XMLHttpRequest.DONE && xhr.status !== 200) {
      // 서버 응답이 실패했을 때 SweetAlert를 사용하여 알림을 보여줍니다.
      swal("실패!", "서버로부터 응답을 받지 못했습니다.", "error");
    }
  };

  // AJAX 통신을 설정합니다.
  xhr.open("POST", "서버의 URL 주소");
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send(params);
}

SweetAlert를 사용하는 HTML 요소에 이벤트 리스너를 추가하여 AJAX 통신을 트리거합니다. 아래의 예시 코드는 <button> 요소를 클릭했을 때 AJAX 통신이 실행되도록 설정하는 방법을 보여줍니다.

<button id="sendButton">데이터 전송</button>

<script>
  document.getElementById("sendButton").addEventListener("click", function() {
    // SweetAlert를 사용하여 사용자에게 확인 메시지를 보여줍니다.
    swal({
      title: "확인",
      text: "데이터를 전송하시겠습니까?",
      icon: "warning",
      buttons: {
        cancel: "취소",
        confirm: "확인"
      },
    }).then((confirm) => {
      if (confirm) {
        var dataToSend = "전송할 데이터";

        // sendDataToServer 함수를 호출하여 AJAX 통신을 실행합니다.
        sendDataToServer(dataToSend);
      }
    });
  });
</script>

위의 예시 코드를 사용하면 SweetAlert를 사용하여 AJAX 통신을 통해 서버로 데이터를 전송할 수 있습니다.

이제 SweetAlert와 AJAX를 함께 사용하는 방법에 대해 알게 되었습니다. 이러한 기술을 사용하면 사용자에게 예쁜 알림을 제공하면서 데이터를 비동기적으로 서버로 전송할 수 있습니다.