AJAX を使用してページをリロードせずに PHP ファイルにデータを投稿するにはどうすればよいですか?

問題: $.load 内でフォームを投稿するのが難しい

ボタンをクリックしてコードを実行しようとすると、投稿データが正常に転送されないという問題が発生します。 「MonsterRequest.php」という名前の指定された PHP ファイル。代わりに、データがメインの親ページに送信されているかのように、ページ自体がリロードされます。目的は、ページを再読み込みせずにデータを投稿することです。

説明:

AJAX: 非同期 JavaScript および XML

この問題を理解するには、次のようにします。 AJAX に慣れることが重要です。 AJAX は、ページをリロードせずに Web ブラウザと Web サーバー間のデータ交換を可能にする Web 開発で使用される技術です。これは、リクエストを Web サーバーに非同期的に送信する JavaScript の XMLHttpRequest オブジェクトを使用することで可能になります。

コードでは、$.load を使用して「MonsterRequest.php」ファイルを「CenterPiece」div にロードしています。 。ただし、この方法はデータの転記には適していません。これは主に、指定された要素に外部コンテンツをロードするために使用されます。

解決策:

ページをリロードせずにデータを投稿するには、$.ajax メソッドを使用する必要があります。このメソッドを使用すると、メイン ページのコンテンツに影響を与えることなく、サーバー側スクリプトに非同期データを送信し、応答を受け取ることができます。

$.ajax を使用してコードを修正したバージョンは次のとおりです:

    Readthis = "MonsterRequest.php?id=<?php echo $_REQUEST['id']; ?>&Mon=";
    TestVar = TestVar.replace(/\s/g, "");
    Readthis = Readthis + htmlencode(TestVar);

    $.ajax({
        url: Readthis,
        type: "POST",
        data: {
            Mon: TestVar
        },
        success: function(data) {
            // Handle the server response here (e.g., display data in the "CenterPiece" div)
        }
    });

このコードでは、$.ajax メソッドを使用して、ページをリロードせずに、「TestVar」変数に含まれるデータを「MonsterRequest.php」にポストします。 「success」関数を使用すると、サーバーの応答を処理し、必要に応じて DOM を更新できます。

以上がAJAX を使用してページをリロードせずに PHP ファイルにデータを投稿するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。