jquery通过url传递和接收参数

一传递参数页面index.html

成都创新互联公司是一家专业提供加格达奇企业网站建设,专注与网站建设、成都网站设计、HTML5建站、小程序制作等业务。10年已为加格达奇众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

<!DOCTYPE html>

<html>

<head>

<title>jquery通过url传递和接收参数</title>

h2{text-align: center;}

</style>

</head>

<body>

<h2>jquery通过url传递参数</h2><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>

</body>

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>

<title>jquery通过url传递和接收参数</title>

h2{text-align: center;}

</style>

</head>

<body>

<h2>jquery通过url接收参数</h2><hr/>

人民币：<span id="RMB"></span></br>

图片：<img id="IMG" src="" /></br>

姓名：<input id="NAME" type="text" /></br>

字符：<div class="STRING"></div>

</body>

//扩展方法获取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>

文章标题：jquery通过url传递和接收参数
文章地址：https://www.cdcxhl.com/article8/gsieip.html

成都网站建设公司_创新互联，为您提供品牌网站设计、做网站、电子商务、、网站设计公司、搜索引擎优化

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容