Html获取Url参数
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Html获取Url参数
做web前端的开发很多的时候都会遇到的⼀个很简答的问题，就是两个页⾯之间的跳转，⼀般来说是：
<a href = "www.baidu.con">测试</a>
这样的没有参数的⼀般是最简单的，可以跳转是因为<a>的href属性，但是⼀般在做项⽬的时候是不会只仅仅跳转的⼀般是带有⼀个或者是多个参数的，然后在下⼀个页⾯将参数传递过去，这个时候很多的⽅法都是可以取到的，今天说的是基于jQuery取参数（虽然很简单，但是照顾新⼿，还是举个例⼦来说吧）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="../js/getUrl.js" type="text/javascript"></script>
</head>
<body>
<a href="jieshouURL.html?name=123&id=1234">点击测试获取url参数</a>
</body>
</html>
这是⼀个简单的H5页⾯，显⽰的效果是：
这个时候我们是写了两个参数的，name和id，这个时候我们写⼀段js：
/*获取到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);
然后我们将jieshouURL.html打开：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="../js/getUrl.js" type="text/javascript"></script>
</head>
<script>
var name = $.getUrlParam('name');
var id = $.getUrlParam('id');
window.onload = function(){
$("#addname").val(name);
$("#addid").val(id);
}
</script>
<body>
<label>测试URL中的name是：</label>
<input type="text" id="addname" />
<label>测试URL中的id是：</label>
<input type="text" id="addid" />
</body>
</html>
我们点击测试URL参数页⾯：
ok，总结⼀下就是：
将js封装起来作为⼀个⼯具，以后需要取值的时候可以直接⽤，直接调⽤⾥⾯的函数就是可以的：
$.getUrlParam('name');//name就是您参数⾥⾯的名字然后将取出来的参数赋值给⼀个变量，就可以在当前页⾯获取到了
不要嫌我啰嗦，说那么简单的⼀个操作写的那么⿇烦，因为我也是从很菜的时候过来的，我知道很多的时候我们认为很简单的操作对于⼀个新⼿来说根本看不懂，所以赘述有时候是对⼤家的照顾。
鄙⼈有⾃⼰的关于⼿机的⽹站搞机族，有兴趣的朋友可以看看。
谢谢
更新
更新时间：2019-3-12
更新内容：使⽤这个⽅法直接获取中⽂的会出现乱码的问题，这是因为浏览器会将您的中⽂解析，我们需要改⼀下写法：
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r != null) return decodeURI(r[2]);
return null;
}
这样就可以了！。