jQuery と PHP を使用してページを更新せずにフォーム データを送信する方法

jQuery と PHP を使用して Ajax 経由でフォーム データを送信する (form.php)

フォーム送信時にブラウザーのリダイレクトを防ぐには、jQuery を利用できます。そしてアヤックス。提供されているようなフォームでこれを実現する方法は次のとおりです。

<form>

jQuery:

$(document).ready(function () {
    $('#foo').submit(function (event) {
        event.preventDefault();
        var $form = $(this);
        var $inputs = $form.find('input, select, button, textarea');
        var serializedData = $form.serialize();
        $inputs.prop('disabled', true);
        $.ajax({
            url: '/form.php',
            type: 'post',
            data: serializedData,
            done: function (response) {
                console.log('Hooray, it worked!');
            },
            fail: function (jqXHR, textStatus, errorThrown) {
                console.error(
                    'The following error occurred: ' +
                        textStatus,
                    errorThrown
                );
            },
            always: function () {
                $inputs.prop('disabled', false);
            }
        });
    });
});

PHP (form.php):

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

の代わりに短縮表現 .post を使用することもできます。 jQuery の .ajax:

$.post('/form.php', serializedData, function (response) {
    console.log('Response: ' + response);
});

ヒント:

• 悪意のあるインジェクションを防ぐために、投稿されたデータをサニタイズします。
• 内に jQuery コードを配置します。 $(ドキュメント).ready() handler.
• より詳細な制御のために、コールバック ハンドラー (done()、fail()、always()) を連鎖させることができます。

以上がjQuery と PHP を使用してページを更新せずにフォーム データを送信する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。