Javascript Fetch API を使う (POST)

最近使い始めた 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のテーブルで表示

コメントを残す