jQuery: AJAX でフォームを送信する

  2. プログラミングのヒント
  3. jQuery ハウツー
  4. jQuery: AJAX でフォームを送信する
Habdul Hazeez 2023年6月21日
jQuery jQuery AJAX
  1. jQuery で AJAX を使用してフォームを送信する: 直接的なアプローチ
  2. jQuery フォーム プラグインを使用して、jQuery で AJAX を使用してフォームを送信する
  3. jQuery で AJAX を使用してフォームを送信する: FormData アプローチ
jQuery: AJAX でフォームを送信する

この記事では、AJAX-in-jQuery を使用してフォームを送信する 3つの方法について説明します。 1つ目は AJAX-in-jQuery を直接使用する方法で、2つ目は AJAX Form Plugin を使用する方法です。

3 番目の方法では、AJAX を使用して送信する前に、FormData オブジェクトを使用してフォーム データを取得します。

jQuery で AJAX を使用してフォームを送信する: 直接的なアプローチ

外部ライブラリや特別なものがないため、これを直接アプローチと呼んでいます。 まず、HTML フォームをセットアップし、名前属性が正しいことを確認します。

次に、jQuery を使用して次の操作を行います。

  1. jQuery を使用して、フォームの送信をリッスンします。
  2. デフォルトの送信動作を防止します。
  3. jQuery で ajax() メソッドを使用して、AJAX 接続を開始します。
  4. ajax() の type プロパティが POST であることを確認します。
  5. url プロパティの値が HTML の action 属性の値であることを確認します。
  6. data プロパティの値がすべてのフォーム入力のシリアル化された形式であることを確認します。
  7. success プロパティの値として関数を使用して、返されたデータを処理します。
  8. error プロパティの値として関数を使用してエラーを処理します。

これらの手順のコード実装は、次のコードにあります。 HTML フォーム属性の値は、フォームを処理する PHP スクリプトであることに注意してください。

今回は、送信されたデータのみをコンソールに表示します。 ただし、フォーム データをデータベースに送信することはできます。 PHP スクリプトは、この記事の最後にあります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>01-jQuery AJAX Submit form</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        body { display: grid; justify-content: center; align-items: center; height: 100vh; }
        form { border: 3px solid #1560bd; font-size: 1.2em; padding: 1.2em; }
    </style>
</head>
<body>
    <main>
        <form id="html_form" action="process-jquery-form.php" method="POST">
            <label for="first_name">First name</label>
            <input id="first_name" type="text" name="first_name" required>
            <label for="last_name">Last name</label>
            <input id="last_name" type="text" name="last_name" required>
            <input type="submit" name="submit" value="Submit form">
        </form>
    </main>
    <script>
        $("#html_form").submit(function(event) {
            // Prevent the default submit behavior
            event.preventDefault();
            // "this" refers to the current HTML form
            let current_html_form = $(this);
            let action_url = current_html_form.attr('action');

            $.ajax({
                type: "POST",
                url: action_url,
                data: current_html_form.serialize(), // Turn the form elements into a usable string
                success: function (data) {
                    console.log(data);
                },
                error: function (data) {
                    alert("An error occurred during form submission");
                },
            });
        });
    </script>
</body>
</html>

出力：

jQueryによるAJAXフォーム送信

jQuery フォーム プラグインを使用して、jQuery で AJAX を使用してフォームを送信する

このメソッドは、jQuery で AJAX を使用してフォームを送信しますが、異なる方法で送信します。 今回は jQuery Form Plugin の ajaxForm メソッドを使用します。

次の例外を除いて、AJAX を使用してフォームを送信する方法は同じです。

  1. jQuery Form Plugin をスクリプトにインポートします。
  2. プラグインの ajaxForm メソッドを使用します。 舞台裏で、これはフォーム送信を処理します。
  3. url プロパティの値は、送信されたデータを処理するスクリプトの名前です。
  4. $.ajax() と書くのではなく、$(form_selector).ajaxForm() と書きます。 form_selector は、HTML フォームのクラスまたは ID 名です。

これらの手順を次のコードに実装しました。 次の画像で出力を確認できます。

この記事の最後に PHP スクリプトがあります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>02-jQuery-AJAX-with-AJAX-Form.html</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" integrity="sha512-YUkaLm+KJ5lQXDBdqBqk7EVhJAdxRnVdT2vtCzwPHSweCzyMgYV/tgGF4/dCyqtCC2eCphz0lRQgatGVdfR0ww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style>
        body { display: grid; justify-content: center; align-items: center; height: 100vh; }
        form { border: 3px dotted #0a9; font-size: 1.2em; padding: 1.2em; }
    </style>
</head>
<body>
    <main>
        <form id="html_form" action="process-jquery-form.php" method="POST">
            <label for="first_name">First name</label>
            <input id="first_name" type="text" name="first_name" required>
            <label for="last_name">Last name</label>
            <input id="last_name" type="text" name="last_name" required>
            <input type="submit" name="submit" value="Submit form">
        </form>
    </main>
    <script>
        $(function(){
            $('#html_form').ajaxForm({
                type: "POST",
                url:'process-jquery-form.php',
                success: function (data) {
                    console.log(data);
                },
                error: function (data) {
                    alert("An error occurred during form submission");
                },
            })
        });
    </script>
</body>
</html>

出力：

jQuery Form Plugin によるフォーム送信

jQuery で AJAX を使用してフォームを送信する: FormData アプローチ

この方法は、外部ライブラリが関与しないため、直接的な方法と同じです。 しかし今回は、FormData オブジェクトを使用してフォーム データを取得します。

ajax() メソッドの残りのステップは、次の追加を除いて同じままです。

  1. processData プロパティを追加し、その値を false に設定します。
  2. contentType プロパティを追加し、その値を false に設定します。
  3. error プロパティの関数には、引数として jQXHR、textStatus、および errorMessage が必要です。 次に、errorMessage 引数を使用してエラー メッセージを表示します。

次のコードは、これを行う方法を示しています。 PHP スクリプトについては、次のセクションで説明します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>03-jQuery-AJAX-with-FormData.html</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        body { display: grid; justify-content: center; align-items: center; height: 100vh;}
        form { border: 3px dashed #1975c7; font-size: 1.2em; padding: 1.2em; }
    </style>
</head>
<body>
    <main>
        <form id="html_form" action="process-jquery-form.php" method="POST">
            <label for="first_name">First name</label>
            <input id="first_name" type="text" name="first_name" required>
            <label for="last_name">Last name</label>
            <input id="last_name" type="text" name="last_name" required>
            <input type="submit" name="submit" value="Submit form">
        </form>
    </main>
    <script>
        $("#html_form").submit(function(event) {
            // Prevent the default submit behavior
            event.preventDefault();

            let current_html_form = $(this);
            let action_url = current_html_form.attr('action');
            // Grab the form data using the FormData Object
            // Later, we'll use the data in the ajax request.
            let form_data = new FormData(document.getElementById('html_form'));

            $.ajax({
                type: "POST",
                url: action_url,
                data: form_data,
                processData: false,
                contentType: false,
                success: function (data) {
                    console.log(data);
                },
                error: function (jQXHR, textStatus, errorMessage) {
                    console.log(errorMessage);
                },
            });
        });
    </script>
</body>
</html>

出力：

AJAX で送信する前に FormData オブジェクトでフォーム データを取得する

HTML フォーム用の PHP スクリプト

以下は、この例で HTML フォームを処理するために使用される PHP スクリプトです。 process-jquery-form.php として作業ディレクトリに保存できます。

<?php
    // We detect an AJAX request from jQuery before
    // processing the form data.
    if (!empty($_SERVER['HTTP_X_REQUESTED_WITH'])
        && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
        if (isset($_POST['first_name']) && isset($_POST['last_name'])) {
            $first_name = $_POST['first_name'];
            $last_name = $_POST['last_name'];
            // Here, we show the first and last names.
            // In your application, you can send them
            // to your database.
            echo "Hello " . htmlspecialchars($first_name) ." " . htmlspecialchars($last_name);
        }
    }
?>
著者： Habdul Hazeez
Habdul Hazeez avatar Habdul Hazeez avatar

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

LinkedIn

関連記事 - jQuery AJAX