More than 5 years have passed since last update.

パラメータを渡してのページ遷移

Posted at 2018-02-14

ページ遷移をする時にパラメータを渡す方法と受け取る方法です。

元のページ　aa01.html

クリックして遷移したページ bb01.html

ページのソース

aa01.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="button_click_monitor.js"></script>
<title>aa01</title>
</head>
<body>
<button id='m_500'>500 M</button>
<button id='m_1000'>1000 M</button>
<button id='m_1500'>1500 M</button>
<button id='m_3000'>3000 M</button>
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
Feb/15/2018<p />
</body>
</html>

button_click_monitor.js

// -------------------------------------------------------------------
//	button_click_monitor.js
//
//					Feb/15/2018
//
// -------------------------------------------------------------------
jQuery(function()
{
	jQuery('#outarea_aa').text("*** button_click_monitor.js *** start ***")

	button_click_monitor ()

	jQuery('#outarea_hh').text("*** button_click_monitor.js *** end ***")
})

// -------------------------------------------------------------------
// [8]:
function button_click_monitor ()
{
	jQuery ("button").click (function ()
		{
		window.location.href = "bb01.html" + "?id=" + this.id
		})
}

// -------------------------------------------------------------------

遷移先のページ

bb01.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="bb01.js"></script>
<title>bb01</title>
</head>
<body>
<select id="category" name="種目">
	<option value="">種目をお選びください</option>
	<option value="m_500">500 M</option>
	<option value="m_1000">1000 M</option>
	<option value="m_1500">1500 M</option>
	<option value="m_3000">3000 M</option>
</select>
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
Feb/15/2018<p />
</body>
</html>

bb01.js

// -------------------------------------------------------------------
//	bb01.js
//
//					Feb/15/2018
//
// -------------------------------------------------------------------
function getParam()
{
	var url   = location.href
	parameters    = url.split("?")
	params   = parameters[1].split("&")
	var paramsArray = []
	for ( it = 0; it < params.length; it++ ) {
		neet = params[it].split("=")
		paramsArray.push(neet[0])
		paramsArray[neet[0]] = neet[1]
		}
	var categoryKey = paramsArray["id"]
	return categoryKey
}

// -------------------------------------------------------------------
jQuery(function()
{
	jQuery('#outarea_aa').text("*** bb01.js *** start ***")

	const idx = getParam()

	var str_tmp = ""
	str_tmp += "Getパラメータ「id」の値は、"+  idx  +" です。<br />"
	jQuery('#outarea_bb').html(str_tmp)

	const value = idx

	jQuery("#category").val(value)

	jQuery('#outarea_hh').text("*** bb01.js *** end ***")
})

// -------------------------------------------------------------------

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up