getとは
- ここで説明するget とは次の語句からなるjavascriptのメソッドです。
- get
- 読み: ゲット
意味: 取得する
getメソッドの概要
URLSearchParamsの、このメソッドは、フォームからGET送信されたURLの添付データの値を取得します。 引数にはパラメーターのキーを任意で指定します。
構文
サンプルを見る前に構文を確認しておきます。
var parameter = ##URLSearchParams.get(keyName);サンプルコードと実行結果
ここでは、送信されたパラメーターの値を取得して表示するようにしていますが、 scriptの結果を見るためには準備が必要です。
結果を見るためには送信ボタンをクリックしてください。 すると、このページが再読み込みされます。 読み込まれたページは同じページですが、URLにはパラメーターが添付されており、そのパラメーターのデータを getメソッドで取得します。
つまり、このページで送信したデータを、このページで取得するようにしているということなので、 実際に使用する場合には form 要素の action 属性に送信先のURLを指定する必要があります。
結果を見るためには、お手数ですが送信ボタンをクリックした後に、ページの結果欄を見て下さい。
サンプルコード: HTML
<body>
<form action="送信先URLを指定する" method="GET">
<p>送信の名前: <input type="text" name="Name" value="YAMADA"></p>
<p>送信の年齢: <input type="number" name="Age" value="42"></p>
<p><input type="submit" value="送信"></p>
</form>
<div>
<p>受信の名前: <output id="idNameOut">innerText</output></p>
<p>受信の年齢: <output id="idAgeOut">innerText</output></p>
</div>
</body>
- 03: input type="text" (name="Name": 初期値では、このテキストボックスから送信されたデータは「Name=YAMADA」となります。)
- 04: input type="number" (name="Age": 初期値では、このテキストボックスから送信されたデータは「Age=42」となります。)
- 05: input type="submit" (送信ボタンです。)
- 08: output (この要素に名前を受信したデータが表示されます。)
- 09: output (この要素に年齢を受信したデータが表示されます。)
サンプルコード: script
<script>
let elmNameOut = document.getElementById("idNameOut");
let elmAgeOut = document.getElementById("idAgeOut");
let objUrlParams = new URLSearchParams(window.location.search);
elmNameOut.innerText = objUrlParams.get("Name");
elmAgeOut.innerText = objUrlParams.get("Age");
</script>
- 02: elmNameOut (識別子=idNameOutの要素をElementオブジェクトとして取得します。)
- 03: elmAgeOut (識別子=idAgeOutの要素をElementオブジェクトとして取得します。)
- 04: objUrlParams (このページのパラメーターを取得した新しいURLSearchParamsのインスタンスを生成しています。)
- 05: .get("Name") (パラメーターから Name のキーの対となる値を取得しています。)
- 06: .get("Age") (パラメーターから Age のキーの対となる値を取得しています。)
受信の名前:
受信の年齢: