window.location.searchの概要
window.location.searchプロパティを使うとURLに添付されたデータを取得できます。
このページでは送信フォームからGETメソッドを使用して、この同ページのURLで受信する方法で、送られたURLの添付データを取得しています。
実際は他のページのURLにデータを送信して、そのページでデータ処理という流れになります。
実機サンプル
| 送信フォーム例 | 補足説明 |
|---|---|
|
送信フォームは以下のようなコードになります。 <form action="データの送信先(URL)" method="GET"> </form> 送信するとアドレスバーのURLに次のようなデータが添付されます。 ※初期値のまま送信した場合 ?username=YWORK&age=30 GETメソッドからの個別データを取得する方法については関連リンクを参照して下さい。 |
結果を表示します
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset = "utf-8">
<title>独学 Webプログラミング! - YWORK</title>
</head>
<body>
<form action="データ送信先ページのURL" method="GET">
<p>
<label>名前:<br><input type="text" name="username" value="YWORK" requird></label><br>
<label>年齢:<br><input type="number" name="age" min="0" value="30"></label><br>
</p>
<p><input type="submit" value="送信"></p>
<p><input type="reset" id="reset"></p>
</form>
<script>
document.open();
document.onkeypress = enter; //テキストボックスでエンターが押されても送信されないように設定
function enter(){if( window.event.keyCode == 13 ){return false;}}//エンターでサブミットしない
document.addEventListener("DOMContentLoaded",function(){ //ページの読み込み完了後に発動
let result = '以下に受信内容を表示します<br>';
if(window.location.search.length > 0){
document.getElementById("idAnswer").innerHTML = '添付データ: ' + window.location.search;
}
});
document.getElementById("reset").addEventListener("click",function(){ //リセットボタンで発動
window.location.href = "このページのURL";
});
document.close();
</script>
<p id="idAnswer">結果を表示します</p>
</body>
</html>