jQuery の $.load() でフォームをロードすると AJAX 投稿が失敗するのはなぜですか?

ロードされたフォーム内での Ajax Post エラー

ボタンのクリックにより jQuery の $.load( を使用して外部フォームのロードがトリガーされるシナリオ) ) メソッドを使用すると、フォームがデータを投稿しようとすると問題が発生します。目的の PHP ファイルに転送される代わりに、ページは自動的にリロードされます。

AJAX の概要

ソリューションを詳しく調べる前に、AJAX の概念を理解することが重要です (非同期 JavaScript および XML)。 AJAX を使用すると、Web サイトはページ全体を更新せずにサーバーとデータを交換できます。

問題と解決策

ここでの問題は、AJAX の仕組みが理解されていないことに起因しています。 。このボタンは $.load() を使用して外部フォームの読み込みをトリガーしますが、これによって AJAX リクエストは確立されません。 AJAX 経由でデータを投稿するには、$.ajax() 関数を使用してフォームを送信する必要があります。

サンプル コード

次の修正されたコードを検討してください:

$('#Sel').change(function() {
    var opt = $(this).val();
    var someelse = 'Hello';
    var more_stuff = 'Goodbye';
    $.ajax({
        type: "POST",
        url: "receiving_file.php",
        data: 'selected_opt=' + opt + '&something_else=' +someelse+'&more_stuff='+more_stuff,
        success:function(data){
            alert('This was sent back: ' + data);
        }
    });
});

この修正されたコードでは、$.ajax() を使用してフォーム データが送信されます。スクリプトは、選択された値と追加パラメータを「receiving_file.php」に送信し、返されたデータをアラート ボックスに表示します。

以上がjQuery の $.load() でフォームをロードすると AJAX 投稿が失敗するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。