Html获取Url参数
转：https://blog.csdn.net/qq_41485414/article/details/79577879
做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;
}
这样就可以了！
