#047
posted on 2021.06.25

ページ移動のときにHTTPリクエストのGETかPOSTで任意の値を2ページ間で受け渡す方法。

サイト内で別のページに移動をするときに、セッションやクッキーで実装するほどでもない簡単な値の送受信をしたかったので、HTTPリクエストのGETメソッドまたはPOSTメソッドを使って任意の値を受け渡す方法のメモ。

※ 受け渡した値でデータベースにアクセスしたりメール送信したりなどの用途ではないのでセキュリティーは考慮しない。

 

 

GETまたはPOSTで任意の値を移動先のページに送信

ページに設置したHTMLのフォームから送信するか、ページにはフォームを設置せずにリンククリックなどのイベント発火時にJavaScriptで動的にフォーム生成と送信を実行する。

GET送信の場合には、フォームを使わなくても、移動先URLに直接パラメーターを付与するだけで送信できる。(URLの後に「?」を記述し、さらにその後に「キー名=値」の形式で記述。)

 

HTMLのフォームで値を送信する方法

HTMLに記述した通常のフォームで送信する方法。

※ 送信にJavaScriptなど不要だが、サイト閲覧者がフォームの送信ボタンをクリックする必要がある。

 

ページ内にフォームを設置して、input要素で送信したいパラーメーターを設定、submitボタンでform要素のmethod属性に指定したリクエストメソッドでaction属性のURLに送信して移動する。

  1. form要素のaction属性に送信先(移動先)URL、method属性にgetかpostを指定。
  2. input要素のname属性とvalue属性を設定。(送信したいパラメーターのキー名と値。)
  3. type属性をsubmitにしたbutton要素で内容を送信。
<form action="送信先のULR" method="メソッドを指定">
	<input type="text" name="任意のキー名" value="送信したい値">
	<button type="submit">送信</button>
</form>

 

フォームを設置せずリンククリックで値を送信する方法

フォームをページ内に設置せずに、a要素のリンククリックで移動先のページに任意の値を送信する方法。

リンクボタンクリック時にJavaScriptでform要素を自動生成して送信内容の設定、submitの実行までを代行する。

  1. a要素がクリックされたら移動先URLが自サイトか判定。(自サイト以外ならそのままリンク先へ移動。)
  2. 通常のa要素の機能を無効化してリンク先への遷移をキャンセル。
  3. form要素を作成して、action属性にa要素のhref属性値、method属性に「post」を代入。
  4. 作成したform要素をbody要素に挿入。
  5. input要素を作成して、name属性とvalue属性に任意の値を代入。(送信したいパラメーターのキー名と値。)
  6. 作成したinput要素を、作成済みのform要素に挿入。
  7. submit()メソッドでフォーム送信を実行してa要素のリンク先に移動。

上記の処理を関数化し、a要素のクリックイベントで発火させる。

 

※ GET送信の場合はフォーム作成部分が不要になるので、通常のリンクの遷移をキャンセルしたら、windowオブジェクトが持つlocationオブジェクトのhrefプロパティーにURLを設定して移動する。(「location.href = ‘移動先URL’+’?パラメーターのキー名=値’;」)

//送信したい任意のパラメーターを「'キー名':'値'」でオブジェクトに格納
const sendParams = {
  'name01':'value01',
  'name02':'value02',
  'name03':'value03'
};

//リンククリック時に実行する関数を作成
const ag2send = function(e){
  //移動先が自サイトなら実行
  if(e.target.hostname === location.hostname){
    //アンカーの機能を無効化
    event.preventDefault();

    //form要素を作成してbody要素に挿入
    const formForSend = document.createElement('form');
    formForSend.style.display ="none";//styleを設定
    formForSend.method = 'post';//method属性を設定
    formForSend.action = e.target.href;//action属性を設定
    document.body.appendChild(formForSend);

    //sendParamsに格納した要素の数だけinput要素を作成してform要素に挿入
    const inputForPost = [];
    let i = 0;
    for(const [k, v] of Object.entries(sendParams)){
      inputForPost[i] = document.createElement('input');
      inputForPost[i].setAttribute('type', 'hidden');//type属性を設定
      inputForPost[i].setAttribute('name', k);//name属性を設定
      inputForPost[i].setAttribute('value', v);//value属性を設定
      formForPost.appendChild(inputForPost[i]);
      i++;
    }

    //リンク先へ送信して移動
    formForSend.submit();
  }
};

//a要素のNodelistを取得
const anchorLinks = document.querySelectorAll('a');
//すべてのa要素にイベントリスナーを登録
for(let i = 0; i < anchorLinks.length; i++){
  anchorLinks[i].addEventListener('click', ag2send);
}

event.target : イベントを発生させたオブジェクトへの参照。オブジェクトは自身の情報をプロパティーに持つ。

location : windowオブジェクトのプロパティー。locationオブジェクトは、現在のページに関する情報をプロパティーに持ち、取得または設定ができる。(ブラウザ上で実行されるJavaScriptではwindowオブジェクトはグローバルオブジェクトなので、「window.location」の「window.」は省略できる。)

event.preventDefault() : eventオブジェクトのメソッド。発生したイベントの規定の動作を行わない。イベントの伝播は止めない。

document.createElement(‘タグ名’) : 指定したタグ名のHTML要素を生成する。

親ノード.appendChild(‘ノード’) : 指定した親ノードの子ノードリストの末尾に引数で指定したノードを追加する。

Object.entries(‘オブジェクト’) : 引数に指定したオブジェクトが所有する文字列を、[key, value]となる配列に変換して返す。(for…in文と違いprototypeを参照しない。)

document.フォーム名.submit() : 指定したフォームを送信する。

document.querySelectorAll(‘セレクター’) : 指定したセレクターのNodelistオブジェクトをDOMから取得する。

Nodelistオブジェクト.length : Nodelist内のitemの数を返す。

対象要素.addEventListener(‘イベントのタイプ’, ‘関数’, ‘イベント伝播順’) : 対象要素に指定のイベントでコールする関数を指定して登録。第3引数(初期値 : false)でイベントの伝播する方向を指定できる。falseでDOM階層の下位から上位に伝播。

 

 

GETまたはPOSTで送信されてきた値を移動先のページで取得

送信されてきた値は、JavaScriptかPHPで取得する。

 

JavaScriptで値を取得する方法

GETメソッドの場合は、JavaScriptのURL APIを利用してURLに含まれるクエリからパラメーターのキーと値を取得する。

POSTメソッドの場合は、クライアントサイドで実行されるJavaScriptでは値の取得ができないのでPHPを使う。

 

GETメソッドで送られてきた値を取得するには、URLSearchParamsオブジェクトが持つメソッドを使う。

  1. windowオブジェクトのプロパティーlocationオブジェクトから現在のページのURLを取得。
  2. 現在のページのURLでURLオブジェクトを作成。
  3. URLオブジェクトからURLSearchParamsオブジェクトを作成。
  4. URLSearchParamsオブジェクトのメソッドを使って送信されたパラメーターを取得。

※ IEはJavaScriptのURL APIに未対応でこの方法は使えないので、URLの文字列を分解して取得する。

 

URLSearchParamsオブジェクトが持つ主なメソッド (URLSearchParamsのmozillaの公式ドキュメント。)

メソッド 動作内容
get() 指定されたキーが持つ最初の値を返す。
has() 指定されたキーが存在するかを真偽値で返す。
forEach() すべてのキーと値をコールバック関数に渡して実行。
entries() すべてのキーと値のペアを取得するためのiterator(オブジェクト)を返す。
keys() すべてのキーを取得するためのiterator(オブジェクト)を返す。
values() すべての値を取得するためのiterator(オブジェクト)を返す。
sort() キーを基準にしてソートする。

 

//URLオブジェクトを作成(URLクラスでインスタンスを生成)
const currentUrl = new URL(window.location.href);
//URLSearchParamsオブジェクトを作成
const queryString = currentUrl.searchParams;


//キー名を指定して値を取得する方法
const receivedValue = queryString.get('任意のキー名');

//コールバック関数ですべてのキーと値を取得して任意のオブジェクトに格納する方法
const receivedParams = {};
queryString.forEach(function(v,k){
  receivedParams[k] = v;
});

//iteratorからすべてのキーと値のペアを取得して出力する方法
const receivedParams = queryString.entries();
for(const param of receivedParams){
  console.log(param[0]);//キー
  console.log(param[1]);//値
}

new URL(‘任意のURL’) : 指定したURLを参照するURLオブジェクトを作成して返す。(URLコンストラクターで生成したインスタンスにプロパティーを追加。)

URLオブジェクト.searchParams : URLオブジェクトの読み取り専用プロパティー。URLに含まれるGETデコードされたクエリ引数へのアクセスが可能なURLSearchParamsオブジェクトを返す。

 

 

IEに対応した方法

送信されたパラメーターを含んだURLをsplit()メソッドで分解して、パラーメーター内にあるすべてのキーと値を任意のオブジェクトに格納する。

//キーと値を格納するオブジェクトを作成
let receivedParams = {};
//URLを取得してクエリ部分で分割して配列化
const queryString = window.location.href.split('?');
//URLにクエリがあるか判定
if(queryString.length >= 2){
  //パラメーターが複数あれば分割して配列化
  const queryParams = queryString[1].split('&');

  //パラメーターの数だけ処理
  for(let i = 0; i < queryParams.length; i++){
    //パラメーターをキーと値で分割
    let eachParam = queryParams[i].split('=');
    receivedParams[eachParam[0]] = eachParam[1];
  }
}else{
  //URLにクエリが無ければnullを返す
  receivedParams = null;
}
console.log(receivedParams);

対象文字列.split(‘区切り文字’) : 区切り文字で分割して配列で返す。文字列内の区切り文字は削除される。区切り文字が無ければ対象文字列をそのまま返す。

配列.length : 配列の要素の数を取得または設定する。

 

 

PHPで値を取得する方法

PHPのスーパーグローバル変数(スクリプト全体を通してすべてのスコープで使用可能な変数)から値を取得する。

 

GETメソッドで送信されてきた場合は「$_GET」(ゲット変数)、POSTメソッドで送信されてきた場合は「$_POST」(ポスト変数)に値が格納されている。変数のデータ型は配列で、連想配列として使用する。(渡される値は自動的にurldecode()関数を介している。)

※ HTMLに出力表示する場合、必要があればhtmlspecialchars()関数でエスケープ処理をする。

//パラメーターを指定して値を取得する方法
$value = $_GET['任意のパラメーターのキー名']

//すべてのキーと値のペアを取得して出力する方法
if(isset($_GET)){
	foreach($_GET as $k => $v){
		echo $k;
		echo $v;
	}
}

 

 

この記事をシェア