API | 優技録

よく使うので雛形をメモしておく #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');
        });
});

$("#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');
        });
    }

/**

* セレクトした部署に所属するメンバーを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();
    });

/**

* 各メンバーの目標設定項目を追加する

function addPersonTargetAmount() {

var html = $("#appendStaff").html();

$("#per_amount_add").append(html);

getSectionStaffs();

}

/**

* 部署のセレクトボックスを変更した時に所属するメンバーを更新する

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

$(".staff").remove();

$('select.section_staffs').children().remove();

getSectionStaffs();

});

&nbs …

の続きを読む

優技録

カテゴリー: API

JSON関連ツール API開発

jQuery Ajaxの雛形

Laravel6 jwt-auth トークンエラーハンドリング Middleware

Swagger API(REST API)とDB定義チェック表

ポケモンで学ぶSwagger(OpenAPI)

OpenAPI(Swagger)のお勉強