jQuery Academy · レッスン

AJAXによるフォーム送信とフィードバック

AJAXでフォームデータを非同期送信し、リアルタイムのフィードバックを提供し、ページ全体を再読み込みせずにサーバーの応答を処理して、より快適なUXを実現します。

「AJAXによるフォーム送信とフィードバック」はCoddyKit上の無料jQuery Academyレッスンです。これはレッスン3/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応の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()の3番目の引数）はこのデータを受け取り、それに応じてUIを更新できます。

<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フォーム送信を習得し、スムーズで操作を妨げないユーザー体験をWebアプリケーションに取り入れられるようになりました。

event.preventDefault()でフォームのデフォルト動作を防ぐ方法を学びました。
.serialize()を使って、送信用のフォームデータを簡単に準備しました。
$.post()または$.ajax()を使って、データを非同期に送信しました。
読み込み中、成功、エラーの状態に対する重要なリアルタイムフィードバックを追加しました。
最後に、送信後にフォームをクリアして、すっきりしたユーザーインターフェースにする方法を学びました。

これらのスキルは、現代的で応答性の高いWebフォームを構築するために欠かせません。

よくある質問

「AJAXによるフォーム送信とフィードバック」レッスンは無料ですか？

はい。「AJAXによるフォーム送信とフィードバック」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全3レッスンが含まれています。

「AJAXによるフォーム送信とフィードバック」で何を学びますか？

AJAXでフォームデータを非同期送信し、リアルタイムのフィードバックを提供し、ページ全体を再読み込みせずにサーバーの応答を処理して、より快適なUXを実現します。ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

jQuery Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/3です。

「AJAXによるフォーム送信とフィードバック」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このjQuery Academyレッスンでコードを書いて実行できますか？

はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← jQuery Academyに戻る