[javascript] 웹 폼과 jQuery를 이용한 AJAX 제출 방법

01 Dec 2023

javascript

웹 폼과 jQuery를 사용하여 AJAX를 통해 데이터를 제출하는 방법을 알아보겠습니다.

1. HTML 폼 작성하기

우선 AJAX를 통해 데이터를 전송할 HTML 폼을 작성해야 합니다. 예를 들어, 아래와 같이 폼을 작성할 수 있습니다.

<form id="myForm">
  <input type="text" name="name" placeholder="이름">
  <input type="email" name="email" placeholder="이메일">
  <button type="submit">제출</button>
</form>

2. JavaScript(jQuery)로 AJAX 요청 보내기

jQuery의 $.ajax() 메소드를 사용하여 AJAX 요청을 보낼 수 있습니다. $.ajax() 메소드는 다양한 옵션을 설정할 수 있으며, url, method, data 등이 중요한 옵션입니다.

아래는 폼을 제출할 때 AJAX 요청을 보내는 JavaScript 코드의 예입니다.

$(document).ready(function() {
  $('#myForm').submit(function(e) {
    e.preventDefault(); // 기본 제출 동작 방지

    var formData = $(this).serialize(); // 폼 데이터 직렬화

    $.ajax({
      url: 'submit.php', // 서버 URL
      method: 'POST', // 요청 메소드 (GET, POST 등)
      data: formData, // 폼 데이터 전송
      success: function(response) {
        console.log(response); // 서버 응답 출력
      },
      error: function(xhr, status, error) {
        console.error(error); // 에러 핸들링
      }
    });
  });
});

위의 코드에서 $('#myForm').submit()은 폼 제출 이벤트를 감지하기 위한 jQuery 이벤트 핸들러입니다. e.preventDefault()는 기본 제출 동작을 방지하여 페이지 이동을 막습니다. $(this).serialize()를 사용하여 폼 데이터를 직렬화하여 AJAX 요청에 필요한 형태로 변환합니다.

$.ajax() 메소드의 url에는 서버의 URL을 설정하고, method에는 요청 메소드를 지정합니다. data에는 직렬화된 폼 데이터를 전달합니다.

서버로부터 성공적인 응답을 받은 경우 success 콜백 함수가 실행되고, 에러가 발생한 경우 error 콜백 함수가 실행됩니다.

3. 서버에서 데이터 처리하기

위의 예제에서 AJAX 요청은 submit.php라는 서버 스크립트로 전송됩니다. 이 스크립트는 AJAX 요청을 처리하고 응답을 반환하는 역할을 합니다.

서버 스크립트에서는 전송된 데이터를 받아 적절히 처리한 후, 필요한 응답을 반환하면 됩니다.

예를 들어, submit.php에서는 다음과 같이 데이터를 처리하고 응답을 반환할 수 있습니다.

<?php
$name = $_POST['name'];
$email = $_POST['email'];

// 데이터 처리 로직

$response = array('message' => '제출이 완료되었습니다.');
echo json_encode($response);
?>

위의 PHP 코드에서는 $_POST 배열을 사용하여 전송된 데이터에 접근할 수 있습니다. 이후, 필요한 데이터 처리 로직을 수행한 후, 응답을 반환하기 위해 json_encode() 함수를 사용하여 json 형태로 변환한 후, echo를 통해 응답을 반환합니다.

결론

웹 폼과 jQuery를 이용하여 AJAX 요청을 보내고, 서버에서 데이터를 처리하고 응답을 반환하는 방법에 대해 알아보았습니다. 이를 활용하여 동적인 웹 애플리케이션을 개발할 수 있습니다.

더 자세한 내용은 아래 참고문서를 참고하시기 바랍니다.

참고문서

[jQuery.ajax() jQuery API Documentation](https://api.jquery.com/jquery.ajax/)