$.load() 呼び出し内のフォームが正しく投稿できないのはなぜですか? AJAX はこれをどのように解決できますか?

$.load 内のフォームが正しく投稿されませんか?問題の詳細な説明

$.load 経由でロードされた領域内に埋め込まれたフォームがデータを正しく送信できないという状況がよく発生します。問題の核心は、ページ全体を再ロードせずにコンテンツを特定の要素にロードする $.load の非同期の性質にあります。これにより、フォームのターゲット アクションとページが存在する実際の URL の間に不一致が生じる可能性があります。

問題を説明するために、次の例を考えてみましょう。

<pre class="brush:php;toolbar:false">
    Readthis = "MonsterRequest.php?id=<?php echo $_REQUEST['id']; ?>&amp;Mon=";
    TestVar = TestVar.replace(/\s/g, "");
    Readthis = Readthis + htmlencode(TestVar);
    $('#CenterPiece').load(Readthis); 

この例では、ボタンをクリックすると、コンテンツを「MonsterRequest.php」から ID「CenterPiece」の要素にロードするコードが実行されます。ただし、$.load は非同期であるため、「MonsterRequest.php」のコンテンツが完全にロードされる前にフォームの送信が行われます。これは、アクション属性で指定されたターゲット URL ではなく、現在のページの URL にフォームが送信されることを意味します。

AJAX と問題の解決方法について

問題を解決するには、AJAX (非同期 JavaScript および XML) を採用する必要があります。 AJAX を使用すると、ページ全体をリロードすることなく、Web ページがサーバーと非同期で通信できるようになります。これにより、動的に読み込まれるコンテンツに埋め込まれたフォームが、目的のターゲットにデータを正しく送信できるようになります。

本質的に、AJAX を使用すると、サーバー上の PHP ファイルにデータを送信し、データを処理し、何もせずに応答を返すことができます。ページをリロードしています。ワークフローは次のとおりです。

ファイル #1:

<pre class="brush:php;toolbar:false">
    <script>
        $(document).ready(function() {
            $('#Sel').change(function() {
                var opt = $(this).val();
                $.ajax({
                    type: "POST",
                    url: "receiving_file.php",
                    data: 'selected_opt=' + opt,
                    success:function(data){
                        alert('This was sent back: ' + data);
                    }
                });
            });
        });
    </script>

このスクリプトでは、「Sel」ドロップダウンが変更されると、AJAX リクエストがトリガーされます。リクエストは「receiving_file.php」に送信され、選択したオプションの値が含まれます。

ファイル #2:receiving_file.php

<pre class="brush:php;toolbar:false">
    <?php
        $recd = $_POST['selected_opt'];
        echo 'You chose: ' . $recd;
    

この PHP ファイルでは、受信したデータは $recd 変数に保存され、応答がエコーバックされます。 client.

結果:

「ファイル #1」でオプションが変更されると、「ファイル #2」に対して AJAX リクエストが行われます。データが処理され、ページをリロードせずに応答がクライアントに返されます。

以上が$.load() 呼び出し内のフォームが正しく投稿できないのはなぜですか? AJAX はこれをどのように解決できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。