Use examples to analyze the way of URL parameter passing
Common URL parameters
1. Pass the determined value
url="https://www.baidu.com?data=123"
Let's see how to use it through an example
Idea:
From page a through url? The latter parameter passes an index to page b, and page b uses this parameter to control the switching of the tab
a page
<!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 page:
<!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>
Analyze the code
This is what page a looks like in a browser
This is what page b looks like in a browser
When we only open page b, when you click on a different column, it will display the corresponding content. This function is implemented by this code
$('#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();
});
The meaning of this code is to correspond to the index of the content according to the index when we click on different columns, so that the corresponding display can be carried out.
Let's take a look at what happens to the address bar when you click the link on page a.
This is the url before the click.
When the second link is clicked
,
we can see the url at this time . There is more? type=2. This is the parameter that we pass to page b through page a, and page b can use this parameter Through js to control the display of the corresponding content.
This is achieved by the following code
// 获取 被访问时的 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();
Here is a brief talk about the way to get the url
1. The
entire URl string of window.location.href (the complete address bar in the browser)
2.
The protocol part
of the window.location.protocol
URL 3. The window.location.host URL The host part of the
4,
the port part
of the window.location.port
URL 5, the path part of the window.location.pathname URL (that is, the file address)
6, the window.location.search
query (parameter) part
7, the window.location.hash
anchor point
2. The variable is passed
url="https://www.baidu.com?data=" + data1
data1 is the variable you need to pass
Let’s take an example to see how to use it.
I now have such a requirement. I have a login page and I also have a home page. I require the login user name to be displayed on the home page. When different users log in, the home page is displayed as The corresponding user name.
First, let’s talk about the idea. The
login page must have a login button. When your login information is correct, you will be redirected to the homepage when you click login. We are writing an article on this redirected link, and let it be redirected through js. Followed by a parameter, and this parameter is the currently logged in user name. After the login is successful, the visited link is obtained through js on the home page, the following parameters are obtained through the spilt function, and then this parameter is added to the position we specify, thus achieving a dynamic display effect. Let's take a look at the simple code implementation. Because there is too much project code, I only attach the important part of the code.
Important code
html of login page
<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);
})
})
Analyze the code. First, you need to get the user name currently entered. After you get the user name, you will perform some verification operations. I did not put the code here. When the verification is passed, the home page will be opened. The focus is on this code.
window.open("../../html/main/productList.html?username=" +name);
I added more ?username=" +name after the url, which means that a parameter username will be added to the homepage. The value of this parameter is name, and this name is what you need to display.
Look at the important code on the homepage
<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>
The content I want to show is placed in <span class="DynamicUsername"></span>this container.
Take a look at how the js of this page is written. According to our thinking, this page is to get the visited link and then operate it.
// 获取 被访问时的 url
var ur = location.href;
// 获取该url = 后面的name
var type = ur.split('?')[1].split("=")[1];
//为其设置文本
$('.DynamicUsername').text(type);
In fact, it is essentially the same as the first method of passing the value, the difference is the dynamic name passed here.
3. Transfer value (multiple)
url="https://www.baidu.com?data=123&data2=456&data3=789"
4. Pass variables (multiple)
url="https://www.baidu.com?data1=" + ‘变量1’ + ‘&data2=’ + '变量2' + ‘&data3=’ + '变量3'
The basic idea is the same as the previous one, but the operation is more complicated, so I won't give an example.
I believe that when you see this, you should be able to use this kind of parameter transfer and get parameter operation.
Part of the content of this article draws on the content of the following links, and attach the original link
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