【javascript】GET送信されたデータを取得する方法
やりたいこと（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行目 : オブジェクトが生成されました。
参考
まとめ
- window.location.searchでGET送信したデータを取得
- split()で分解し、オブジェクトに変換
- decodeURIComponentでデコード
こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを２つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは？window.innerHeightとは？window.pageYOffsetとは？
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript（Object.entries）を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク
