【JavaScript】GETリクエストのパラメータを追加する

今回は、JavaScriptでGETリクエストのパラメータを追加する方法として「URL.searchParams」を使用した方法を紹介していきます。

「URL.searchParams」の詳細については、以下のサイトを参考にしてください。

URL: searchParams プロパティ - Web API | MDN
searchParams は URL インターフェイスの読み取り専用プロパティで、URL に含まれる GET デコードされたクエリー引数へのアクセスを可能にする URLSearchParams オブジェクトを返します。
developer.mozilla.org
URLSearchParams - Web API | MDN
URLSearchParams インターフェイスは、URL のクエリー文字列の操作に役立つメソッドを定義します。
developer.mozilla.org

古いWebブラウザで使用する場合は、「URL.searchParams」を使用できない可能性があります。上記サイトの「ブラウザーの互換性」の表を確認してから使用してください。

スポンサーリンク

検証環境

検証に使用した環境／ライブラリを次に記載します。

  • Google Chrome
    • バージョン：94.0.4606.81（64ビット）
  • Firefox
    • バージョン：78.15.0esr（64ビット）

使用方法

GETリクエストのパラメータを追加するためのプログラム例は、次のようになります。

【プログラム例】

<script>
  var url = new URL("https://fumidzuki.com")
  url.searchParams.append("param1", "value1");
  url.searchParams.append("param2", "value2");
  console.log(url.href)
</script>

【実行結果】

https://fumidzuki.com/?param1=value1&param2=value2

【プログラム詳細】

「URL」インタフェースを使用してオブジェクトを作成します。引数にはリクエスト先のURLを指定します。

「URL」オブジェクトから「searchParams」を取得します。「searchParams」の「append」メソッドを使用してパラメータを追加することができます。メソッドの詳細については、以下のサイトを参考にしてください。

URLSearchParams: append() メソッド - Web API | MDN
append() は URLSearchParams インターフェイスのメソッドで、指定されたキー/値のペアを新しい検索パラメーターとして追加します。
developer.mozilla.org

まとめ

「URL.searchParams」を使用したGETリクエストのパラメータの作成方法を紹介しました。