HTML
jQuery
Get

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

More than 1 year has passed since last update.

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

元のページ aa01.html

page_feb1501.png

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

page_feb1502.png

ページのソース


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 ***")
})

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