最近使い始めた Fetch APIでPOSTを試してみました。
< コード例 >
HTML
<!-- 検索条件メニュー -->
<div id="menudiv" class="container float-left ml-0 badge-dark rounded">
<form id="formdiv" class="form-inline form-group ml-0 mr-1 mt-1 mb-1 p-1">
<!-- 日付範囲選択 -->
<div class="pl-0 pr-1"></div>
<input type="text" id="mindtinput" value="" size="10" class="mr-1 form-control" />
~
<input type="text" id="maxdtinput" value="" size="10" class="ml-1 mr-1 form-control" />
<!-- 検索ボタン -->
<button id="search_button" type="button"
class="btn btn-primary ml-1 config_button tippyspan"
data-toggle="tooltip" data-placement="bottom"
title="Execute search">
<i class="fa fa-search"></i></button>
<!-- ページネーション -->
<div id="top_pagenator" class="ml-2 mt-0 pt-0">
<span id="topp_first" class="mr-1 curpo topps tippyspan" title="Move to first page"><i class="fa fa-angle-double-left"></i></span>
<span id="topp_prev" class="mr-1 curpo topps tippyspan" title="Move to previous page"><i class="fa fa-angle-left"></i></span>
<span id="topp_next" class="mr-1 curpo topps tippyspan" title="Move to next page"><i class="fa fa-angle-right"></i></span>
<span id="topp_last" class="mr-1 curpo topps tippyspan" title="Move to last page"><i class="fa fa-angle-double-right"></i></span>
<span id="topp_position" class=""></span>
</div>
<span id="reccnt" class="ml-3 mr-1"></span> Records
</form>
</div>
Javascript
// moment.jsで前日を取得 //
const mm = moment()
mm.add(BFCNT[tpThis] * -1, "day")
const mindt = mm.format('YYYY-MM-DD')
// inutに日付をセット //
$("#mindtinput").val(mindt)
$("#maxdtinput").val(TODAY_FORMAT)
// フォームデータを作成 //
const fd = new FormData();
fd.set('tp', tpThis);
fd.set('stdt', mindt);
fd.set('endt', TODAY_FORMAT);
// Fetch API //
fetch("include/SelectLogStc.php",
{
method: "POST", body: fd
}
)
// ** 応答時 ** //
.then((data) => data.text())
// ** 応答後 ** //
.then((res) => {
// JSON文字列を配列にする //
const data = JSON.parse(res)
console.log("-- data")
console.log(data)
// ** 応答後の処理をここに書く ** //
})
< 画面例 >
Fetch APIでリクエストした応答結果をTabulatorのテーブルで表示