ywork2020.com

Title

URL添付データを操作する

目次 (INDEX)

URLSearchParamsとは

ここで説明するURLSearchParams とは次の語句からなるjavascriptのコンストラクタです。
URL
読み: ユーアールエル
意味: ネットワーク上の住所にあたる
search
読み: サーチ
意味: 検索
params
読み: パラムス
意味: (パラメーター) の複数形、外部から投入されるデータ

目次に戻る

URLSearchParamsの概要

このコンストラクタから生成されたオブジェクトは、 Webページの送信フォームからGET送信されたパラメーターを受信し、取得及び操作することができます。

このページではサンプルとして、このページから送信されたデータを、このページで受信して処理するものを用意しました。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var objURLParams = new URLSearchParams(window.location.search);

目次に戻る

実機サンプル

送信フォーム例補足説明








送信フォームは以下のようなコードになります。
<form action="データの送信先(URL)" method="GET"> </form>

このページではGETメソッドを使用して同ページに送信していますのでアドレスバーのURLが次のように変化します。 ※初期値のまま送信した場合
/content/js-urlsearchparams.html?username=YWORK&age=30&
job=%E4%BC%9A%E7%A4%BE%E5%93%A1&tel=00-1111-2222&email=sample%40domain.jp&dm=on

POSTメソッドで送信した場合はアドレスバーのURLに変化は無く、データが追加されません。
/content/js-urlsearchparams.html
POSTデータの受信はjQueryの$.post()メソッドやPHPの$_POST変数などで行います。
又、XMLHttpRequestオブジェクトを使ってGETやPOST送信を行う方法もあります。

このページでは window.location.search も利用しています。それだけをシンプルに理解するのには、関連リンクを参照して下さい。

    目次に戻る

    サンプルコード

    サンプルコード: HTML
    <body>
    	<form action="./js-urlsearchparams.html" method="GET">
    		<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>
    		<label for="job">職業:<br>
    		<select name="job" id="job">
    			<option value="会社員">会社員</option>
    			<option value="公務員">公務員</option>
    			<option value="自営業">自営業</option>
    			<option value="学生">学生</option>
    			<option value="主婦">主婦</option>
    			<option value="パート・アルバイト">パート・アルバイト</option>
    			<option value="その他">その他</option>
    		</select></label><br>
    		<label>E-mail:<br><input type="email" name="email" value="sample@domain.jp"></label><br>
    		<label>DMの送信を希望する<br><input type="checkbox" name="dm" checked></label><br>
    		<input type="submit" value="送信"><br><input type="reset" id="reset">
    	</form>
    	<ul id="idAnswer"></ul>
    </body>
    
    サンプルコード: script
    <script>
    	document.addEventListener("DOMContentLoaded",function(){
    		let elmAnswer = document.getElementById("idAnswer");
    		elmAnswer.innerText = '以下に受信内容を表示します';
    		let objUrlParams = new URLSearchParams(window.location.search);
    		if(objUrlParams.has('username')==true){
    			elmAnswer.insertAdjacentHTML('beforeend','<li>名前: ' + objUrlParams.get('username') + '</li>');
    		}
    		else{
    			elmAnswer.insertAdjacentHTML('beforeend','<li>名前: no data</li>');
    		}
    		if(objUrlParams.has('age')==true){
    			elmAnswer.insertAdjacentHTML('beforeend','<li>年齢: ' + objUrlParams.get('age') + '</li>');
    		}
    		else{
    			elmAnswer.insertAdjacentHTML('beforeend','<li>年齢: no data</li>');
    		}
    		if(objUrlParams.has('job')==true){
    			elmAnswer.insertAdjacentHTML('beforeend','<li>職業: ' + objUrlParams.get('job') + '</li>');
    		}
    		else{
    			elmAnswer.insertAdjacentHTML('beforeend','<li>職業: no data</li>');
    		}
    		if(objUrlParams.has('email')==true){
    			elmAnswer.insertAdjacentHTML('beforeend','<li>mail: ' + objUrlParams.get('email') + '</li>');
    		}
    		else{
    			elmAnswer.insertAdjacentHTML('beforeend','<li>mail: no data</li>');
    		}
    		if(objUrlParams.has('dm')==true){
    			elmAnswer.insertAdjacentHTML('beforeend','<li>DM希望: ' + objUrlParams.get('dm') + '</li>');
    		}
    		else{
    			elmAnswer.insertAdjacentHTML('beforeend','<li>DM希望: no data</li>');
    		}
    	});
    </script>
    

    目次に戻る