서버로 데이터 전송하기 (jQuery를 사용한 AJAX 방식)

jQuery는 JavaScript를 쉽게 사용할 수 있도록 도와주는 라이브러리입니다. AJAX 요청을 작성할 때도 매우 간단하게 구현할 수 있습니다.

 

1. HTML 구조

입력창과 버튼을 추가합니다.

 

<input id="attendanceSq" type="text" placeholder="ID를 입력하세요" />
<button id="sendButton">전송</button>

 

---

 

2. jQuery로 AJAX 요청 작성하기

jQuery의 $.ajax() 또는 더 간단한 $.post() 메서드를 사용하여 데이터를 서버에 보낼 수 있습니다.

예제 코드

<!-- jQuery 라이브러리 추가 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
  $(document).ready(function () {
    // 버튼 클릭 시 실행
    $("#sendButton").on("click", function () {
      // Input 값 가져오기
      const inputValue = $("#attendanceSq").val(); // jQuery로 값 가져오기

      // AJAX 요청
      $.ajax({
        url: "http://example.com/api", // 서버 URL
        method: "POST", // HTTP 요청 방식
        contentType: "application/json", // 데이터 형식 (JSON)
        data: JSON.stringify({ attendanceId: inputValue }), // 서버에 보낼 데이터
        success: function (response) {
          // 요청 성공 시 실행
          console.log("서버 응답:", response);
          alert("데이터가 성공적으로 전송되었습니다!");
        },
        error: function (error) {
          // 요청 실패 시 실행
          console.error("에러 발생:", error);
          alert("데이터 전송에 실패했습니다. 다시 시도하세요.");
        },
      });
    });
  });
</script>

 

---

3. 코드 설명

1. $("#attendanceSq").val()
   • id가 attendanceSq인 입력창의 값을 가져옵니다.
2. $.ajax()
   • 서버로 데이터를 전송하는 AJAX 요청을 수행합니다.
3. 옵션 설명:
   • url: 데이터를 전송할 서버의 URL (예: http://example.com/api).
   • method: 데이터 전송 방식 (POST, GET 등).
   • contentType: 전송할 데이터의 형식 (application/json은 JSON 형식).
   • data: 서버로 보낼 데이터. 여기서 JSON 형식으로 변환하여 전송합니다.
   • success: 요청 성공 시 실행할 콜백 함수.
   • error: 요청 실패 시 실행할 콜백 함수.
4. 결과:
   • 사용자가 입력창에 값을 입력하고 "전송" 버튼을 클릭하면 해당 값이 서버로 전송됩니다.
   • 서버의 응답에 따라 성공 또는 실패 메시지가 표시됩니다.

---

4. 더 간단한 방식: $.post() 사용

jQuery의 $.post()를 사용하면 AJAX 요청이 더 간단해집니다.

$("#sendButton").on("click", function () {
  const inputValue = $("#attendanceSq").val();

  $.post(
    "http://example.com/api", // 서버 URL
    { attendanceId: inputValue }, // 서버에 보낼 데이터 (JSON 형식 아님)
    function (response) {
      // 성공 콜백
      console.log("서버 응답:", response);
      alert("데이터가 성공적으로 전송되었습니다!");
    }
  ).fail(function (error) {
    // 실패 콜백
    console.error("에러 발생:", error);
    alert("데이터 전송에 실패했습니다.");
  });
});

---

결론

jQuery를 사용하면 AJAX 요청을 작성하는 것이 매우 간단해집니다. 위 예제를 참고하여 필요에 따라 $.ajax() 또는 $.post() 방식을 사용하면 됩니다. jQuery는 초보자에게도 친숙한 코드 스타일을 제공합니다!