formを使用せずaタグでクエリーパラメータを送信する方法

課題

• 送信したいクエリパラメータの数が決まっていない
• formが使用できない

実装

• フロント側
  • $requestにはkeyとvalueで構成された配列が入っている。
  • http_build_queryを使用し、$requestをkey1=value1&key2=value2みたいな形式にしている

<a type="button" class="green-border-btn small-btn margin-right-10"
            id="exportAccountsCsv"
            href="{{ route('accounts.export_csv') }}">
                <div class="d-flex align-center">
                    <img src="{{ asset('img/download-cloud.png') }}" alt="" class="margin-right-10">
                    <span>CSVダウンロード</span>
                </div>
            </a>
            <input type="hidden" id="accountsQueryParam" value="{{ http_build_query($request) }}">

• js側
  • 対象のaタグがクリックされた際に、先ほど整型した$requestをurlの末尾にくっつている。

$('#exportAccountsCsv').click(function (e) {
  e.preventDefault();
  let queryParam = $('#accountsQueryParam').val()
  let url = $(this).attr('href') + '?' + queryParam;
  window.location = url;
});