【javascript】GET送信されたデータを取得する方法

投稿日 : 2022年06月11日更新日 :

やりたいこと（get送信したデータを取得）
HTMLのform
javascript
まとめ

やりたいこと（get送信したデータを取得）

フォームの値を変えて、送信ボタンを押してみてください。送信されたデータをテーブル（表）に表示します。

HTMLのform

1行目 : 同じ階層にsample.htmlを準備し、actionに指定
methodはgetに。

4行目 : javascriptで処理するため、nameはキャメルケースで記述。 e-mailと書くとエラーが出ます。

<form action="./sample.html" method="get">
  <span>名前 : </span>
  <input type="text" name="name" value="taro" /><br />
  <span>電話 : </span>
  <input type="tel" name="tel" value="090-1234-5678" /><br />
  <span>Eメール : </span>
  <input type="email" name="eMail" value="sample@gmail.com" /><br />
  <input type="submit" />
</form>

javascript

同じ階層に置いたsample.htmlに以下のjavascriptを記述します。

let queryString = window.location.search;
let queryObject = new Object();

if (queryString) {
  queryString = queryString.substring(1);
  let parameters = queryString.split("&");

  for (let i = 0; i < parameters.length; i++) {
    let element = parameters[i].split("=");

    let paramName = decodeURIComponent(element[0]);
    let paramValue = decodeURIComponent(element[1]);

    queryObject[paramName] = paramValue;
  }
}

1行目 : GET送信されたものは、送信先URLの後ろに追加されています。
window.location.searchで、送信先URL以降のものを取得できます。つまり、
queryString = ?name=taro&tel=090-1234-5678&eMail=sample%40gmail.com

5行目 : substring(1)で、最初の?を取り除きます。
queryString = name=taro&tel=090-1234-5678&eMail=sample%40gmail.com

6行目 : split("&")で、&ごとに区切ります。
parameters = ['name=taro', 'tel=090-1234-5678', 'eMail=sample%40gmail.com']

9行目 : split("=")で、=ごとに区切ります。
element = ['name', 'taro'], ['tel', '090-1234-5678'], ['eMail', 'sample%40gmail.com']

11, 12行目 : decodeURIComponentで、デコードします。
※今回は全てアルファベットなのでデコードしなくても大丈夫ですが、日本語等の場合、デコードする必要があります。例えば、名前をtaroではなく、太郎とした場合、受け取るデータは%E5%A4%AA%E9%83%8Eになり、デコードが必要です。

%E5%A4%AA%E9%83%8E

14行目 : オブジェクトが生成されました。 object