▲TOPへ戻る

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

get

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

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

名前 :
電話 :
Eメール :

HTMLのform

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

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以降のものを取得できます。 get search つまり、
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

参考

js
【javascript】連想配列をテーブルできれいに表示する方法

まとめ

  1. window.location.searchでGET送信したデータを取得
  2. split()で分解し、オブジェクトに変換
  3. decodeURIComponentでデコード

こんな記事も読まれています。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

パソコン

javascript

カメラ

ブログ