jQuery の $.load() メソッドを使用して Ajax フォームを送信し、ページのリロードを防ぐ方法

$.load()

jQuery の $.load() メソッドを使用した Ajax フォーム送信により、次のことが可能になります。ページ全体を再ロードせずに、外部コンテンツを指定された要素にロードします。ただし、$.load() を使用してフォームをロードすると、フォーム送信が正しく機能しないという問題が発生する可能性があります。

$.load() と Ajax フォームの送信

デフォルトでは、$.load() を使用してロードされたフォームは Ajax 経由で自動的に送信されません。 Ajax フォーム送信を有効にするには、$.load() メソッド内で「data」オプションを使用する必要があります。 「data」オプションを使用すると、フォームの読み込み時にサーバー側スクリプトにパラメータを渡すことができます。

例:

<br>$('#CenterPiece').load(Readthis, {</p>
<pre class="brush:php;toolbar:false">TestVar: htmlencode(TestVar)

});

この例では、「TestVar」パラメータが「MonsterRequest.php」に渡されます。フォームが読み込まれます。サーバー側スクリプト (MonsterRequest.php) は、$_POST['TestVar'] を使用してこのパラメーターにアクセスできます。

ページのリロードを避ける

フォームの送信時にページがリロードされないようにするには、送信イベント内で「event.preventDefault()」メソッドを使用します。 handler.

例:

<br>$('form')。 submit(関数(イベント) {</p>
<pre class="brush:php;toolbar:false">event.preventDefault();
$.ajax({
    type: "POST",
    url: "MonsterRequest.php",
    data: $(this).serialize(),
    success: function(data) {
        // Process server response
    }
});

});

このコードは、デフォルトの HTTP GET メソッドを使用してフォームが送信されるのを防ぎ、代わりにAjax経由でフォームデータを作成します。 "MonsterRequest.php" スクリプトは、ページを再読み込みせずにフォーム データを処理します。

注: サーバー側スクリプト (MonsterRequest.php) が実行されていることを確認します。 php) が Ajax リクエストを正しく処理することが重要です。スクリプトは $_POST メソッドを使用してフォーム データを受信し、必要な処理を実行する必要があります。

以上がjQuery の $.load() メソッドを使用して Ajax フォームを送信し、ページのリロードを防ぐ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。