PHP
 Computer >> コンピューター >  >> プログラミング >> PHP

jQueryのserializeArray()で送信したフォームデータをPHP側で受け取る方法

PHPでserializeArrayによるPOST値を取得するには、jQueryのserializeArray()メソッドを使用します。このメソッドは、.serialize()と同様にフォームおよびフォーム内のすべての要素をシリアライズしますが、戻り値としてJSON形式のデータ構造を返す点が大きな特徴です。

serializeArray()の戻り値について

serializeArray()は、「name」と「value」のペアを持つオブジェクトの配列を返します。イメージとしては以下のような構造です。

[
  { name: "name", value: "入力された名前" },
  { name: "age",  value: "入力された年齢" },
  { name: "sex",  value: "Male" }
]

この配列をそのまま$.post()や$.ajax()のdataオプションに渡せば、PHP側では通常のフォーム送信とまったく同じように$_REQUESTや$_POSTで値を受け取ることができます。

PHP側（serialize.php）の実装

まず、データを受け取る側のPHPファイル（serialize.php）を用意します。ここでは$_REQUESTで各パラメータを取得し、そのまま出力しています。

<?php
if( $_REQUEST["name"] ) {

    $name = $_REQUEST['name'];
    echo "Welcome ". $name;
    $age = $_REQUEST['age'];
    echo "<br />Your age : ". $age;
    $sex = $_REQUEST['sex'];
    echo "<br />Your gender : ". $sex;
}
?>

実際の開発では、XSS対策としてhtmlspecialchars()で出力をエスケープすること、またPOSTのみを受け付ける場合は$_POSTを使用することが推奨されます。

サンプルコード

次に、serializeArray()を使ってフォームデータを送信する具体例を見てみましょう。「Load Data」ボタンをクリックすると、$.post()経由でserialize.phpにデータが送信され、その結果がSTAGE-1に表示されます。同時に、serializeArray()の戻り値をjQuery.each()でループ処理し、STAGE-2に入力値の一覧が表示されます。

<html>

    <head>
        <title>The jQuery Example</title>
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        
        <script>
            $(document).ready(function() {
              
                $("#driver").click(function(event){
                  
                    $.post(
                        "/jquery/serialize.php",
                        $("#testform").serializeArray(),
                        function(data) {
                            $('#stage1').html(data);
                        }
                    );
                    
                    var fields = $("#testform").serializeArray();
                    $("#stage2").empty();
                    
                    jQuery.each(fields, function(i, field){
                        $("#stage2").append(field.value + " ");
                    });
                    
                });
                
            });
        </script>
    </head>
    
    <body>
    
        <p>Click on the button to load result.html file:</p>
        
        <div id = "stage1" style = "background-color:maroon;color:white;">
            STAGE - 1
        </div>
        
        <br />
        
        <div id = "stage2" style = "background-color:maroon;color:white;">
            STAGE - 2
        </div>
        
        <form id = "testform">
        
            <table>
            
                <tr>
                    <td><p>Name:</p></td>
                    <td><input type = "text" name = "name" size = "40" /></td>
                </tr>
                
                <tr>
                    <td><p>Age:</p></td>
                    <td><input type = "text" name = "age" size = "40" /></td>
                </tr>
                
                <tr>
                    <td><p>Sex:</p></td>
                    <td> <select name = "sex">
                        <option value = "Male" selected>Male</option>
                        <option value = "Female">Female</option>
                    </select></td>
                </tr>
                
                <tr>
                    <td colspan = "2">
                        <input type = "button" id = "driver" value = "Load Data" />
                    </td>
                </tr> 
                
            </table>
            
        </form>
        
    </body>
    
</html>

コードのポイント

  • $.post()の第2引数：serializeArray()の結果をそのまま渡すことで、PHP側で$_REQUEST／$_POSTとして値を取得できます。
  • 戻り値の構造：[{name: "...", value: "..."}, ...] という配列のため、jQuery.each()で1要素ずつ取り出して加工できます。
  • field.value／field.name：各要素の値や項目名へのアクセスは、これらのプロパティ経由で行います。
  • select要素の注意点：元のコードではMaleとFemaleの両方にselectedが付いていましたが、複数選択不可のselectでは最後のoptionが優先されるため、意図しない動作になる可能性があります。初期選択は1つだけ指定しましょう。

まとめ

serializeArray()は、フォーム全体の入力値をJSON配列として手軽に取得できる便利なメソッドです。$.post()や$.ajax()のdataオプションにそのまま渡すだけで、PHP側では通常のPOSTリクエストと同じように処理できます。Ajax通信でフォームデータを送信したい場面で、ぜひ活用してみてください。

  1. 【Python】文字列から整数値を抽出・取得する方法をわかりやすく解説

    Pythonでは、正規表現（reモジュール）を使うことで、文字列の中から出現順にすべての整数値を抽出し、リストとして取得できます。以下のコード例をご覧ください。 正規表現ですべての整数値を抽出する import re s = 12 hello 52 19 some random 15 number # 数字部分を抽出し、int型に変換する list_of_nums = [int(n) for n in re.findall(r\d+, s)] print(list_of_nums) 出力結果 [12, 52, 19, 15] re.findall(r\d+, s) は、文字列 s から連続し

  2. Windows 11で最高のパフォーマンスを引き出す方法【初心者向け最適化ガイド】

    Windows 11は一般ユーザー向けに正式リリースされ、数多くの新機能が搭載されました。スタートメニューをお気に入りのアプリに合わせてカスタマイズでき、UIの変更によってこれまでとはひと味違う快適な操作体験が得られます。 また、ここ数か月の間にMicrosoftによるメモリ管理やディスク使用量の改善、CPU使用率やバッテリー駆動時間への対応などが進められ、OSのパフォーマンスにもさまざまな改良が加えられています。 しかしその一方で、Windows 11がスムーズかつ高速に動作するのは比較的新しいPCであり、セキュリティ要件を満たしている古いパソコンでは体感できるほどの改善が見られないのが実情