ページを更新せずに jQuery Ajax POST を使用してフォームを送信するにはどうすればよいですか?

PHP を使用した jQuery Ajax POST の例

この例では、jQuery の Ajax 機能を使用してフォーム データを PHP スクリプトに送信する方法を示します。

問題

従来の方法を使用してフォームを送信すると、ブラウザーは指定されたアクション URL にリダイレクトされます。ただし、ページを更新せずにフォーム データをキャプチャして PHP スクリプトに送信したいと考えています。

jQuery と Ajax のソリューション

jQuery の .ajax メソッドを使用すると、サーバーに対して非同期リクエストを行うことができます。これを使用してフォーム データを送信する方法は次のとおりです。

HTML:

<form>

jQuery:

$("#foo").submit(function(event) {
    event.preventDefault();

    var $form = $(this);
    var serializedData = $form.serialize();

    $.ajax({
        url: "/form.php",
        type: "post",
        data: serializedData,
        done: function (response, textStatus, jqXHR) {
            console.log("Hooray, it worked!");
        },
        fail: function (jqXHR, textStatus, errorThrown) {
            console.error("The following error occurred: " + textStatus, errorThrown);
        },
        always: function () {
            // Reenable form inputs
        }
    });
});

PHP (form.php):

// Access form data via $_POST
$bar = isset($_POST['bar']) ? $_POST['bar'] : null;

このソリューションでは、.done() コールバック ハンドラーと .fail() コールバック ハンドラーを使用して、成功シナリオと失敗シナリオをそれぞれ処理します。 .always() コールバックは、リクエストの結果に関係なく呼び出されます。

追加メモ:

• 代わりに、jQuery の短縮表現 .post を使用できます。 .ajax.
• フォーム データを忘れずにサニタイズしてください。サーバー側。
• このコードは、jQuery バージョン 1.8 以降と互換性があります。

以上がページを更新せずに jQuery Ajax POST を使用してフォームを送信するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。