jQuery Ajaxの雛形

jQuery

よく使うので雛形をメモしておく

#select_userのセレクトボックスで選んだ時に処理が行われる時の例

$("#select_user").change(function() {

        // CSRFトークンの取得
        $.ajaxSetup({
            timeout: 3000,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // 変数設定
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
        var user_id = $('#select_user').val();

        // Ajax設定 ============================================================================
        $.ajax({
                    type:     'get',
                    datatype: 'json',
                    url:      '/getUsers', // パス
                    timeout:  3000,
                    data: {
                        _token:         CSRF_TOKEN,    // CSRFトークン
                        user_id: user_id               // ユーザid
                    }
        })

        // Ajax成功時の処理 ===========================
        .done(function(data,textStatus,jqXHR) {
            console.log(data);
        })
        // Ajax通信失敗時の処理 ========================
        .fail(function(data) {
            console.log('Ajax Error');
        });
});

実際の利用例

同じ処理が必要な場面があったので共通化した

    /**
    * セレクトした部署に所属するメンバーをAjaxで取得する
    */
    function getSectionStaffs()
    {
        // CSRFトークンの取得
        $.ajaxSetup({
            timeout: 3000,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        // 変数設定
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
        var section_id = $('#select_section').val();
        // Ajax設定 ============================================================================
        $.ajax({
                    type:     'get',
                    datatype: 'json',
                    url:      '/getSectionStaffs',
                    timeout:  3000,
                    data: {
                        _token: CSRF_TOKEN,    // CSRFトークン
                        section_id: section_id   // 部署id
                    }
        })
        // Ajax成功時の処理 ===========================
        .done(function(data,textStatus,jqXHR) {
            $.each(data, function(index, value) {
                $(".section_staffs").last().append($("<option>").val(index).text(value));
            })
            console.log(data);
        })
        // Ajax通信失敗時の処理 ========================
        .fail(function(data) {
            console.log('Ajax Error');
        });
    }

    /**
    * 各メンバーの目標設定項目を追加する
    */
    function addPersonTargetAmount() {
        var html = $("#appendStaff").html();
        $("#per_amount_add").append(html);
        getSectionStaffs();
    }

    /**
    * 部署のセレクトボックスを変更した時に所属するメンバーを更新する
    */
    $("#select_section").change(function() {
        $(".staff").remove();
        $('select.section_staffs').children().remove();
        getSectionStaffs();
    });