
文字数制限を100文字以内、AjaxでAPIに送信するという内容
jQuery
$(function() {
// 初期状態はアラートを隠す
$('#count_allert').hide();
// 100文字制限の入力フォーム
$('#weapon_textarea').on('input', function() {
var cnt = $(this).val().length;
if (101 > cnt) {
$('#save').fadeIn();
$('#count_allert').hide();
} else {
$('#save').fadeOut();
$('#count_allert').show();
}
});
});
$("#save").click(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 weapon = $('textarea[name="weapon"]').val();
// Ajax設定 ============================================================================
$.ajax({
type: 'get',
datatype: 'json',
url: '/saveWeaponAjax',
timeout: 3000,
data: {
_token: CSRF_TOKEN,
userId: userId,
userWeapon: userWeapon
}
})
// Ajax成功時の処理 ===========================
.done(function(data,textStatus,jqXHR) {
location.reload();
})
// Ajax通信失敗時の処理 ========================
.fail(function(data) {
console.log('saveWeaponAjax() Ajax Error');
});
});
HTML
<textarea style="width:600px; height:200px;" name="weapon" id="weapon_textarea" placeholder="100文字まで入力できます"></textarea>
<span id="count_allert" style="font-size:12px; color:red">文字数制限を超えました。</span>
<div class="submit">
<a href="" id="cancel">キャンセル</a>
<a href="" id="save">保存する</a>
</div>

![[DDD] Value Object 値オブジェクト](https://www.yuulinux.tokyo/contents/wp-content/uploads/2020/01/PHP-logo_2-150x150.jpeg)





