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

$.load()

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

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

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

例:

<br>$('#CenterPiece').load(Readthis, {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">TestVar: htmlencode(TestVar)

ログイン後にコピー

});

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

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

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

例:

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

ログイン後にコピー