jQueryでページ遷移時にパラメータの受け渡しを行う方法!

jQueryでページ遷移時にパラメータの受け渡しを行う方法をサンプルコード付きで解説します。GET通信・POST通信それぞれでjQueryでパラメータを受け渡してページ遷移させる方法を紹介します。

コンテンツ [表示]

  1. 1jQueryでページ遷移時にパラメータの受け渡しを行いたい
  2. 2jQueryでページ遷移時にパラメータの受け渡しを行う方法
  3. 2.1GET通信
  4. 2.2POST通信

jQueryでページ遷移時にパラメータの受け渡しを行いたい

通常ページ遷移はリンクをクリックしてときや、フォームでボタンを押したタイミングですが、jQueryで任意のタイミングでページ遷移を行う事も出来ます。

jQueryでページ遷移を行う方法はぜひ下記を参考にしましょう。

あわせて読みたい
jQueryでページ遷移を行う方法をサンプルコード付き解説!のイメージ
jQueryでページ遷移を行う方法をサンプルコード付き解説!
jQueryでページ遷移を行う方法をサンプルコード付きで解説いたします。要素をクリックしたときや、プルダウンメニューを選択したとき、POSTでページ遷移させる方法など様々なパターンのページ遷移の方法を紹介します。

今回はjQueryを使ったページ遷移の中で、パラメータを受け渡してページ遷移させる方法についてを解説します。

GETやPOST通信それぞれでjQueryを使ってパラメータを渡す方法をサンプルコード付きで解説していきます。

jQueryでページ遷移時にパラメータの受け渡しを行う方法

GET通信

上記のサンプルコードではボタンを押すと、button要素のid属性の値をパラメータとして付与してページ遷移します。

パラメータを付けてページ遷移させるコード

  window.location.href = "https://qumeru.com" + "?id=" + this.id;

上記のようにGET通信のパラメータは末尾に「?」をつけてパラメータを「パラメータ名=値」の形で受け渡しします。

複数のパラメータを渡す場合は

  window.location.href = "https://qumeru.com" + "?id=" + this.id + "&from=" + "media";

という形で「&」をつけてパラメータをつなげて書きましょう。

POST通信

次にjQueryを使ってPOST通信でパラメータの受け渡しをする方法です。

上記のサンプルコードではボタンを押すと、POST通信でパラメータを付けてページ遷移させます。今回はボタンのid属性に設定されている値をパラメータとして渡しています。

POST通信の場合はform要素が必要なため、jQueryのappend()form要素を先にHTML中に追加し、その中にはinput type="hidden"でパラメータを付与します。

最後にフォームをsubmitすることで、パラメータを受け渡しして、POST通信でページ遷移させることが出来ます。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次