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

Mary-Kate Olsen
リリース: 2024-11-11 14:04:03
オリジナル
470 人が閲覧しました

How to Correctly Post Form Data Within $.load Using AJAX?

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

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

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

ファイル #1:

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

<html>
    <head>
        <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 + '&amp;something_else=' +someelse+'&amp;more_stuff='+more_stuff,
                        success:function(data){
                            alert('This was sent back: ' + data);
                        }
                    });
                });
            });
        </script>
    </head>
<body>

<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>
</body>
</html>
ログイン後にコピー

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

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

    $recd = $_POST['selected_opt'];
    echo 'You chose: ' . $recd;
ログイン後にコピー

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート