formの内容を送信する前にチェックするserialize()関数
serialize()メソッドを使えば、formの内容を送信する前に配列やJSONの形で格納したり、格納した値をチェックすることができます。
サンプルを見てみましょう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>serialize()関数</title> <script src="js/jquery-1.11.1.js"></script> <script> $(document).ready(function() { $('#serialize').click(function() { $('#placeholder').html($('form').serialize()); }); $('#serialize-array').click(function() { $('#placeholder').html(JSON.stringify( $('form').serializeArray())); }); }); </script> </head> <body> <h2>jQueryでシリアライズ</h2> <form action="" method="post"> <label for="first_name">名前</label> <input type="text" name="first_name" value="" id="first_name"><br> <label for="last_name">苗字</label> <input type="text" name="last_name" value="" id="last_name"><br> </form> <input type="button" name="serialize" value="Serialize" id="serialize"> <input type="button" name="serialize-array" value="SerializeArray" id="serialize-array"> <div id="placeholder"></div> </body> </html>
serialize()では以下のように値を取得できます
first_name=hoge&last_name=fuga
serializeArray()では配列の形で取得できます。JSON.sringifyと組み合わせると以下のように取得できます。
[{"name":"first_name","value":"hoge"},{"name":"last_name","value":"fuga"}]