一傳遞參數頁面index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery通過url傳遞 和 接收 參數</title>
<style type="text/css">
h1{text-align: center;}
</style>
</head>
<body>
<h1>jquery通過url傳遞參數</h1><hr/>
人民币:<input type="number" id="rmb" value="100" /></br>
圖檔URL:<input type="text" id="img" value="../p_w_picpath/goods1.jpg" /></br>
姓名:<input type="text" id="name" value="姓名" /></br>
<input type="button" id="btn" value="傳遞參數" />
</body>
<script type="text/javascript">
var parameter1 = document.getElementById('rmb').value;
var parameter2 = document.getElementById('img').value;
var parameter3 = document.getElementById('name').value;
document.getElementById('btn').onclick = function(){
window.location.href = "info.html?rmb=" + parameter1 + "&img=" + parameter2 + "&name= "+parameter3+"&string=abcdefghijklmn";
}
</script>
</html>
二、接收參數頁面info.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery通過url傳遞 和 接收 參數</title>
<style type="text/css">
h1{text-align: center;}
</style>
</head>
<body>
<h1>jquery通過url接收參數</h1><hr/>
人民币:<span id="RMB"></span></br>
圖檔:<img id="IMG" src="" /></br>
姓名:<input id="NAME" type="text" /></br>
字元:<div class="STRING"></div>
</body>
<script src="js/jquery-2.2.3.js" type="text/javascript"></script> <!--注:要先引用jQuery.js檔案哦!-->
<script type="text/javascript">
//擴充方法擷取url參數
(function ($) {
$.getUrlParam = function (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //構造一個含有目标參數的正規表達式對象
var r = window.location.search.substr(1).match(reg); //比對目标參數
if (r != null) return unescape(r[2]); return null; //傳回參數值
}
})(jQuery);
//調用上的$.getUrlParam('參數')方法 來擷取傳過來對應的參數 rmb、img、name、string
$('#RMB').html('銷售價:' + $.getUrlParam('rmb') + '.00元');//得到變量1的參數: 998
$('#IMG').attr("src" , $.getUrlParam('img')); //得到變量2的參數: ../p_w_picpath/goods1.jpg
$('#NAME').val($.getUrlParam('name')); //得到變量3的參數:(傳遞參數頁面中input框的值)
$('.STRING').text($.getUrlParam('string')); //得到:自定義字元
</script>
</html>
轉載于:https://blog.51cto.com/mupiao/1858557