0Pricing
jQuery Academy · 강의

AJAX 양식 제출 및 피드백

AJAX를 통해 양식 데이터를 비동기적으로 제출하고 실시간 사용자 피드백을 제공하며, 전체 페이지를 다시 불러오지 않고 서버 응답을 처리해 더 원활한 사용자 경험을 구현합니다.

AJAX 양식 제출 및 피드백은(는) CoddyKit의 무료 jQuery Academy 강의입니다. 이것은 3개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 jQuery Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

AJAX로 원활한 폼 만들기

페이지 전체를 다시 로드하지 않고 폼을 제출하는 모습을 상상해 보세요! 이것이 바로 AJAX 폼 제출의 장점입니다.

AJAX를 사용하면 페이지 전체를 새로 고치는 대신 백그라운드에서 폼 데이터를 서버로 보낼 수 있습니다. 따라서 댓글, 가입 또는 빠른 업데이트에 적합한 더 매끄럽고 빠른 사용자 경험을 제공할 수 있습니다.

기본 제출 중지

AJAX 폼 제출의 첫 단계는 브라우저의 기본 동작을 막는 것입니다. 그렇게 하지 않으면 페이지가 평소처럼 다시 로드되어 AJAX를 사용하는 의미가 없어집니다!

폼의 submit 처리기 안에서 event.preventDefault()를 호출하면 됩니다.

<form id="myForm">
  <label for="username">Name:</label>
  <input type="text" id="username" name="username" placeholder="Your name">
  <button type="submit">Submit</button>
</form>
<div id="status"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#myForm').submit(function(event) {
      event.preventDefault(); // Stop default form submission
      $('#status').text("Form submission prevented!");
      console.log("Form submission prevented!");
    });
  });
</script>

폼 데이터 준비

AJAX를 통해 폼 데이터를 보내기 전에 올바른 형식으로 묶어야 합니다. jQuery의 .serialize() 메서드가 이 작업에 적합합니다!

  • 폼 안의 모든 input, select, textarea 요소에서 값을 자동으로 수집합니다.
  • 값을 URL 인코딩 문자열로 변환합니다(예: name=Alice&email=alice%40example.com).
  • 이 문자열은 폼 데이터를 서버로 보낼 때 사용하는 표준 형식입니다.
<form id="dataForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" value="Bob">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" value="bob@example.com">
  <button type="submit">Get Data</button>
</form>
<div id="output"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#dataForm').submit(function(event) {
      event.preventDefault();
      let formData = $(this).serialize();
      $('#output').text("Serialized: " + formData);
      console.log(formData); // name=Bob&email=bob%40example.com
    });
  });
</script>

AJAX 요청 보내기

폼 데이터를 직렬화했으므로 이제 서버로 보낼 수 있습니다. jQuery는 여러 AJAX 메서드를 제공하지만 $.post()는 HTTP POST 메서드를 사용하여 데이터를 보내는 편리한 단축 방법입니다.

이 메서드는 서버 URL, 직렬화된 데이터, 그리고 성공했을 때 실행할 선택적 콜백 함수를 전달받습니다.

<form id="submitForm">
  <label for="msg">Message:</label>
  <input type="text" id="msg" name="message" value="Hello AJAX!">
  <button type="submit">Send</button>
</form>
<div id="response"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#submitForm').submit(function(event) {
      event.preventDefault();
      let formData = $(this).serialize();
      // Using a dummy API endpoint for demonstration
      $.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
        $('#response').text("Success! Server ID: " + data.id);
        console.log("Server response:", data);
      });
    });
  });
</script>

로딩 피드백 표시

사용자가 제출 버튼을 클릭하면 즉각적인 응답을 기대합니다. AJAX 요청은 비동기적으로 처리되므로 지연 시간이 발생합니다. 따라서 시각적 피드백을 제공하는 것이 중요합니다!

요청이 진행되는 동안 'Loading...' 메시지나 로딩 표시기를 보여 주고, 응답이 도착하면 숨길 수 있습니다.

<style>
  #loading { display: none; color: gray; }
</style>
<form id="feedbackForm">
  <label for="item">Item:</label>
  <input type="text" id="item" name="item" value="New Widget">
  <button type="submit">Add</button>
</form>
<div id="loading">Loading...</div>
<div id="status"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#feedbackForm').submit(function(event) {
      event.preventDefault();
      $('#loading').show(); // Show loading indicator
      $('#status').text(''); // Clear previous status
      let formData = $(this).serialize();
      $.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
        $('#loading').hide(); // Hide loading
        $('#status').text("Item added with ID: " + data.id);
      });
    });
  });
</script>

성공 응답 처리

서버가 폼 데이터를 성공적으로 처리하면 일반적으로 응답을 보냅니다. 이 응답에는 확인 메시지, 새로 생성된 레코드의 ID 또는 업데이트된 데이터가 포함될 수 있습니다.

$.post()의 세 번째 인수인 성공 콜백 함수가 이 데이터를 전달받으므로, 이에 맞게 사용자 인터페이스를 업데이트할 수 있습니다.

<form id="addTodoForm">
  <label for="todoTitle">Todo:</label>
  <input type="text" id="todoTitle" name="title" placeholder="New todo item">
  <button type="submit">Add Todo</button>
</form>
<ul id="todoList"></ul>
<div id="message"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#addTodoForm').submit(function(event) {
      event.preventDefault();
      $('#message').text('Adding...');
      let formData = $(this).serialize();
      $.post("https://jsonplaceholder.typicode.com/todos", formData, function(todo) {
        $('#message').text('Todo added!');
        $('#todoList').append('<li>' + todo.title + ' (ID: ' + todo.id + ')</li>');
        $('#addTodoForm')[0].reset(); // Clear form fields
      });
    });
  });
</script>

우아한 오류 처리

모든 요청이 성공하는 것은 아닙니다. 네트워크 문제, 서버 오류 또는 유효하지 않은 데이터로 인해 AJAX 요청이 실패할 수 있습니다. 이러한 오류를 적절히 처리하고 사용자에게 알려야 합니다.

$.post()에는 .fail() 메서드를 연결할 수 있습니다. $.ajax()에는 error 콜백을 사용하거나 반환된 Deferred 객체의 .fail() 메서드를 사용할 수 있습니다.

<form id="errorForm">
  <label for="badData">Data:</label>
  <input type="text" id="badData" name="data" value="bad value">
  <button type="submit">Submit</button>
</form>
<div id="errorMessage" style="color: red;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#errorForm').submit(function(event) {
      event.preventDefault();
      $('#errorMessage').text('');
      let formData = $(this).serialize();
      // Simulating an error by posting to a non-existent endpoint
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/nonexistent-endpoint", // Will cause a 404 error
        type: "POST",
        data: formData
      })
      .done(function(data) {
        $('#errorMessage').text("Unexpected success!");
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        $('#errorMessage').text("Error: " + textStatus + " - " + errorThrown);
        console.error("AJAX Error:", textStatus, errorThrown);
      });
    });
  });
</script>

제출 후 폼 지우기

폼을 성공적으로 제출한 후 입력 필드를 지우면 사용자 경험이 좋아집니다. 실수로 다시 제출하는 것을 방지하고 다음 작업을 위한 깨끗한 상태를 제공할 수 있습니다.

폼 요소에서 기본 DOM .reset() 메서드를 사용하거나 개별 입력값을 수동으로 지울 수 있습니다.

<form id="clearForm">
  <label for="item">Item:</label>
  <input type="text" id="item" name="item" value="Item A">
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" value="1">
  <button type="submit">Add</button>
</form>
<div id="feedbackMsg" style="color: green;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#clearForm').submit(function(event) {
      event.preventDefault();
      $('#feedbackMsg').text('Submitting...');
      let formData = $(this).serialize();
      $.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
        $('#feedbackMsg').text('Successfully added! ID: ' + data.id);
        $('#clearForm')[0].reset(); // Clears all form fields
      });
    });
  });
</script>

전체 AJAX 폼 예제

지금까지 배운 모든 기술을 결합해 보겠습니다. 기본 제출을 막고, 데이터를 직렬화하고, AJAX 요청을 보내고, 로딩 피드백을 표시하고, 성공 및 실패 응답을 모두 처리한 다음, 마지막으로 폼을 지웁니다.

이러한 종합적인 접근 방식은 견고하고 사용자 친화적인 AJAX 폼 경험을 보장합니다.

<style>
  #loader { display: none; color: blue; }
  #result { margin-top: 10px; font-weight: bold; }
</style>
<form id="fullAjaxForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Register</button>
</form>
<div id="loader">Processing...</div>
<div id="result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#fullAjaxForm').submit(function(event) {
      event.preventDefault(); // Stop default form submission
      $('#loader').show();    // Show loading indicator
      $('#result').text('');  // Clear previous results
      let formData = $(this).serialize(); // Serialize form data
      
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/users", // Dummy API endpoint
        type: "POST",
        data: formData,
        dataType: "json" // Expect JSON response
      })
      .done(function(response) {
        $('#result').css('color', 'green').text('Registration successful! ID: ' + response.id);
        $('#fullAjaxForm')[0].reset(); // Clear form fields
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        $('#result').css('color', 'red').text('Registration failed: ' + textStatus);
        console.error("AJAX Error:", textStatus, errorThrown);
      })
      .always(function() {
        $('#loader').hide(); // Always hide loading indicator
      });
    });
  });
</script>

이해도 확인

AJAX로 폼을 제출하고 실시간 피드백을 제공하는 방법을 배웠습니다. 이제 이해한 내용을 확인해 보겠습니다!

복습: 원활한 폼 제출

축하합니다! AJAX 폼 제출을 익혀 웹 애플리케이션에 매끄럽고 중단이 적은 사용자 경험을 더할 수 있게 되었습니다.

  • event.preventDefault()로 폼의 기본 동작을 막는 방법을 배웠습니다.
  • .serialize()를 사용하여 전송할 폼 데이터를 쉽게 준비했습니다.
  • $.post() 또는 $.ajax()를 구현하여 데이터를 비동기적으로 보냈습니다.
  • 로딩, 성공, 오류 상태에 대한 중요한 실시간 사용자 피드백을 추가했습니다.
  • 마지막으로 깔끔한 사용자 인터페이스를 위해 제출 후 폼을 지우는 방법을 배웠습니다.

이러한 기술은 현대적이고 반응성 높은 웹 폼을 구축하는 데 필수적입니다!

자주 묻는 질문

“AJAX 양식 제출 및 피드백” 강의는 무료인가요?

네 — “AJAX 양식 제출 및 피드백” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 jQuery Academy 강의 전체를 잠금 해제할 수 있습니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

“AJAX 양식 제출 및 피드백”에서 뭘 배우나요?

AJAX를 통해 양식 데이터를 비동기적으로 제출하고 실시간 사용자 피드백을 제공하며, 전체 페이지를 다시 불러오지 않고 서버 응답을 처리해 더 원활한 사용자 경험을 구현합니다. 브라우저에서 직접 실행하는 실습 코드로 jQuery Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

jQuery Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 jQuery Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 3번째 강의입니다.

“AJAX 양식 제출 및 피드백” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 jQuery Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 jQuery Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 동적 양식 필드 조작
  2. 클라이언트 측 양식 유효성 검사 로직
  3. AJAX 양식 제출 및 피드백
← jQuery Academy(으)로 돌아가기