AJAX を使用して $.load 内でフォーム データを正しくポストする方法

AJAX を使用して $.load 内でのフォーム投稿を修正する

$.load 呼び出し内でフォームからデータを投稿しようとすると、投稿がターゲットの PHP スクリプトに適切に送信されないという問題が発生する可能性があります。これにより、送信されたデータを処理する代わりにページがリロードされる可能性があります。

これを解決するには、AJAX の実装を検討してください。 AJAX を使用すると、ページをリロードせずにサーバー側の PHP ファイルにデータを送信できます。その仕組みは次のとおりです:

ファイル #1:

このファイルには、フォームの HTML および JavaScript コードが含まれています。

    
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#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);
                        }
                    });
                });
            });
        </script>
    


<select id="Sel">
    <option value="Song1">default value</option>
    <option value="Song2">Break on through</option>
    <option value="Song3">Time</option>
    <option value="Song4">Money</option>
    <option value="Song5">Saucerful of Secrets</option>
</select>

ファイル #2:受信_file.php

このファイルは送信されたデータを処理する PHP スクリプト。

    $recd = $_POST['selected_opt'];
    echo 'You chose: ' . $recd;

このメソッドにより、ページを再読み込みせずにフォーム データが確実に投稿されるため、データを処理して適切に応答できます。

以上がAJAX を使用して $.load 内でフォーム データを正しくポストする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。