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

