ハマログ

株式会社イーツー・インフォの社員ブログ

Ajaxで$.postのForm送信にserialize(シリアライズ)を使用する

こんにちは。S.Iです。

先日、試行錯誤したAjaxでPOSTメソッドでForm送信にserialize(シリアライズ)を使用する方法を紹介します。

$.postは$.ajaxの略記です。$.ajax関数で次のように指定した処理と同じ処理を実行します。
引数の説明はこちら

$.post( "test.php", { name: "John", time: "2pm" } );

通常はこんな感じでname=太郎&mail=…のような形式の文字列dataを指定しますがチェックボックスやラジオボタンなんかの値を確実に処理するのは手間です。また保守性の観点でもよろしくありません。

そんなときのserialize(シリアライズ)!!

<script>
    $(document).ready(function() {
        $(".saveMySearch").on('click', function(e) {
            var params = $("#searchForm").serialize();
            $.post("/{{$segment}}/api/job/mysearch/add", params,
                    function(jsonData) {
                        data = JSON.parse(jsonData);
                        if (data && data.result) {
                            var inst = $.remodal.lookup[$('[data-remodal-id=sendmysearch]').data('remodal')];
                            inst.open();
                        } else {
                            var inst = $.remodal.lookup[$('[data-remodal-id=sendmysearcherror]').data('remodal')];
                            inst.open();
                        }
                    });
            return false;
        });
    });
</script>

フォームの内容をテキストに変換する便利な機能です。
$searchForm.serialize()で得られる値をそのまま利用できるので便利ですね+。(ш´ω`*)шワーイ

Ajaxformserialize

  S.I   2014年9月8日


関連記事

LaravelとGoogle APIの統合

LaravelでGoogleのAPIを利用します。 Laravelにはcompo…

Google PageSpeed Insightsでウェブサイトの速度チェックを実施する

Googleウェブマスターツールに「サイトのパフォーマンス」というメニューがあっ…

マイクロサービスアーキテクチャへの取り組み

はじめに ”マイクロサービスアーキテクチャ”という言葉も、随分普及してきました。…


← 前の投稿

次の投稿 →