jquery通过url传递 和 接收 参数

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery通过url传递 和 接收 参数相关的知识,希望对你有一定的参考价值。


一传递参数页面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="../image/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的参数:  ../image/goods1.jpg

$(‘#NAME‘).val($.getUrlParam(‘name‘)); //得到变量3的参数:(传递参数页面中input框的值)

$(‘.STRING‘).text($.getUrlParam(‘string‘)); //得到:自定义字符


</script>

</html>


以上是关于jquery通过url传递 和 接收 参数的主要内容,如果未能解决你的问题,请参考以下文章

jquery ajax如何接收url传递的参数

JQuery 传递数组到后台后台 后台接收不到参数

通过url传递参数+解决传递中文参数出现乱码问题

html网页如何传递接收地址参数?

html网页如何传递接收地址参数?

0428日重点:页面之间通过url参数的方法传递变量