常见的url传参
1、传确定的值
url="https://www.baidu.com?data=123"
通过一个例子去看一下怎么用
思路：
从页面 a 通过 url ？ 后面的参数给页面b 传一个 index，页面b通过这个参数来控制该选项卡的切换
a页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="b.html?type=1">校园招聘</a>
<a href="b.html?type=2">社会招聘</a>
<a href="b.html?type=3">名企招聘</a>
</body>
</html>
b页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab-JQ</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#wrap {
margin: 90px 290px;
}
#tit {
height: 30px;
width: 600px;
}
#tit span {
float: left;
height: 30px;
line-height: 30px;
width: 200px;
font-size: 20px;
text-align: center;
color: #000000;
border-top: 1px solid #CCCCCC;
}
#con li {
display: none;
width: 600px;
border: 1px solid #CCCCCC;
font-size: 30px;
line-height: 200px;
text-align: center;
}
#tit span.select {
background: #d6e9fd;
color: #ffffff;
}
#con li.show {
display: block;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="wrap">
<div id="tit">
<span class="select">校园招聘</span>
<span>社会招聘</span>
<span>名企招聘</span>
</div>
<ul id="con">
<li id="1" class="show">校园招聘校园招聘校园招聘</li>
<li id="2">社会招聘社会招聘社会招聘</li>
<li id="3">名企招聘名企招聘名企招聘</li>
</ul>
</div>
<script>
//选项卡
$('#tit span').click(function() {
var i = $(this).index(); //下标第一种写法
//var i = $('tit').index(this);//下标第二种写法
$(this).addClass('select').siblings().removeClass('select');
$('#con li').eq(i).show().siblings().hide();
});
// 获取 被访问时的 url
var ur = location.href;
// 获取该url = 后面的数字 （id）
var type = ur.split('?')[1].split("=")[1];
// 使用传过来的 数字 （id） 来控制该选项卡的切换
// 其实就是从页面 A 通过 URL ？ 后面的参数 给页面B 传一个 index
$('#tit span').eq(type - 1).addClass('select').siblings().removeClass('select');
$('#con li').eq(type - 1).show().siblings().hide();
</script>
</body>
</html>
分析一下代码
这是a页面在浏览器的样子
这是b页面在浏览器中的样子
当我们只打开b页面的时候，当你点击不同的栏目，它会显示对应的内容，这个功能是通过这段代码实现的
$('#tit span').click(function() {
var i = $(this).index(); //下标第一种写法
//var i = $('tit').index(this);//下标第二种写法
$(this).addClass('select').siblings().removeClass('select');
$('#con li').eq(i).show().siblings().hide();
});
这段代码意思就是根据我们点击不同栏目时的索引对应到内容的索引，这样就可以进行相应的显示。
下面看一下，点击a页面的链接时，地址栏会发生什么变化。
这是点击前的url
当点击了第二个链接时
此时的url
我们可以看到，后面多了?type=2,这个就是我们通过a页面传给b页面的参数，b页面利用这个参数可以通过js去控制显示对应的内容。
这是通过下面这段代码实现的
// 获取 被访问时的 url
var ur = location.href;
// 获取该url = 后面的数字 （id）
var type = ur.split('?')[1].split("=")[1];
// 使用传过来的 数字 （id） 来控制该选项卡的切换
// 其实就是从页面 A 通过 URL ？ 后面的参数 给页面B 传一个 index
$('#tit span').eq(type - 1).addClass('select').siblings().removeClass('select');
$('#con li').eq(type - 1).show().siblings().hide();
这里再简单说一下获取url的方式
1、window.location.href
整个URl字符串(在浏览器中就是完整的地址栏)
2、window.location.protocol
URL 的协议部分
3、window.location.host
URL 的主机部分
4、window.location.port
URL 的端口部分
5、window.location.pathname
URL 的路径部分(就是文件地址)
6、window.location.search
查询(参数)部分
7、window.location.hash
锚点
2、传的是变量
url="https://www.baidu.com?data=" + data1
data1为你需要传的变量
下面我们通过一个实例去看一下怎么用
我现在有这样一个需求，我有一个登录页面，我还有一个首页，我要求在首页显示登录的用户名，不同的用户登录时，在首页显示的是对应的用户名。
先来说一下思路
登录页面肯定有一个登录按钮，当你登录信息正确时，你点击登录，会跳转到首页，我们就是在这个跳转的链接上做文章，通过js让其跳转的链接后面跟上一个参数，而这个参数就是当前登录的用户名。登录成功之后，在首页再通过js获取这个被访问的链接，通过spilt函数得到后面的参数，然后将这个参数添加到我们指定的位置，这样就实现了一个动态显示的效果。下面一起来看一下简单的代码实现，由于项目代码太多，我只附上重要部分代码。
登录页面的重要代码
html
<input class="login-form-input" name="email" type="email" placeholder="邮箱" id="email" autoComplete="username" value="">
<button class="login-button main-form-button">登录</button>
js
$(function() {
$('.main-form-button').click(function() {
var name = $("#email").val();
window.open("../../html/main/productList.html?username=" +name);
})
})
分析一下代码，首先你需要得到当前输入的用户名，得到这个用户名之后会进行一些验证操作，我这里代码没有放上，当验证通过后就会打开首页，重点是这句代码
window.open("../../html/main/productList.html?username=" +name);
我在url后面多加了?username=" +name，这就代表将给首页穿一个参数username，这个参数的值是name，这个name就是你所需要的展示的东西。
再看首页重要代码
<span class="usernameShow">
<span class="DynamicUsername"></span>
<div class="dynamicShow">
<div class="angle"></div>
<div id="userMsg">
<ul>
<li class="userMsg">账号设置</li>
<li class="userMsg">退出登录</li>
</ul>
</div>
</div>
</span>
我要展示的内容放在<span class="DynamicUsername"></span>这个容器里。
看一下这个页面的js怎样写的，这个页面根据我们的思路就是获取被访问的链接，然后进行操作。
// 获取 被访问时的 url
var ur = location.href;
// 获取该url = 后面的name
var type = ur.split('?')[1].split("=")[1];
//为其设置文本
$('.DynamicUsername').text(type);
其实本质上和第一种传定值的方法一样，不同的是，这里传的动态的name。
3、传定值（多个）
url="https://www.baidu.com?data=123&data2=456&data3=789"
4、传变量（多个）
url="https://www.baidu.com?data1=" + ‘变量1’ + ‘&data2=’ + '变量2' + ‘&data3=’ + '变量3'
基本和前面思路是一样的，只不过操作更复杂一些，我就不举例了。
我相信看到这里，你应该就会用这种传参，取参操作了。
本篇文章部分内容借鉴了下面这些链接的内容，附上原文链接
https://blog.csdn.net/qq_38822390/article/details/88037772
https://blog.csdn.net/zhangjinhuang/article/details/24440931
https://blog.csdn.net/weixin_44130308/article/details/102580330