Utilice ejemplos para analizar la forma de pasar los parámetros de URL
Parámetros de URL comunes
1. Pasar el valor determinado
url="https://www.baidu.com?data=123"
Veamos cómo usarlo a través de un ejemplo.
Idea: ¿
Desde la página a hasta la URL? El último parámetro pasa un índice a la página b, y la página b usa este parámetro para controlar el cambio de la pestaña
a la página
<!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 página:
<!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>
Analiza el código
Así es como se ve la página a en un navegador
Así es como se ve la página b en un navegador
Cuando solo abrimos la página b, al hacer clic en una columna diferente, se mostrará el contenido correspondiente. Esta función es implementada por este código
$('#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();
});
El significado de este código es corresponder al índice del contenido según el índice cuando hacemos clic en diferentes columnas, para que se pueda realizar la visualización correspondiente.
Echemos un vistazo a lo que le sucede a la barra de direcciones cuando hace clic en el enlace de la página a.
Esta es la URL antes del clic.
Cuando se hace clic en el segundo enlace
,
podemos ver la URL en este momento . Hay más? Type = 2. Este es el parámetro que pasamos a la página b a través de la página a, y la página b puede utilice este parámetro Through js para controlar la visualización del contenido correspondiente.
Esto se logra mediante el siguiente código
// 获取 被访问时的 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();
Aquí hay una breve charla sobre la forma de obtener la URL
1. La
cadena completa de URL de window.location.href (la barra de direcciones completa en el navegador)
2.
La parte
del protocolo de la
URL window.location.protocol 3. La ventana .location.host URL La parte del host del
4,
la parte
del puerto de la window.location.port
URL 5, la parte de la ruta de la window.location.pathname URL (es decir, la dirección del archivo)
6, la window.location .search
query (parámetro) parte
7, el
punto de anclaje window.location.hash
2. Se pasa la variable
url="https://www.baidu.com?data=" + data1
data1 es la variable que necesitas pasar
Tomemos un ejemplo para ver cómo se usa.
Ahora tengo ese requisito. Tengo una página de inicio de sesión y también tengo una página de inicio. Necesito que el nombre de usuario de inicio de sesión se muestre en la página de inicio. Cuando diferentes usuarios inician sesión , la página de inicio se muestra como El nombre de usuario correspondiente.
Primero, hablemos de la idea. La
página de inicio de sesión debe tener un botón de inicio de sesión. Cuando su información de inicio de sesión sea correcta, se le redirigirá a la página de inicio cuando haga clic para iniciar sesión. Estamos escribiendo un artículo sobre este enlace de redireccionamiento y déjelo ser redirigido a través de js Seguido de un parámetro, y este parámetro es el nombre de usuario actualmente conectado. Una vez que el inicio de sesión es exitoso, el enlace visitado se obtiene a través de js en la página de inicio, los siguientes parámetros se obtienen a través de la función spilled, y luego este parámetro se agrega a la posición que especificamos, logrando así un efecto de visualización dinámica. Echemos un vistazo a la implementación de código simple. Debido a que hay demasiado código de proyecto, solo adjunto la parte importante del código.
Código importante
html de la página de inicio de sesión
<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);
})
})
Analiza el código. Primero, debes obtener el nombre de usuario ingresado actualmente. Después de obtener el nombre de usuario, realizarás algunas operaciones de verificación. No puse el código aquí. Cuando se apruebe la verificación, se abrirá la página de inicio El foco está en este código.
window.open("../../html/main/productList.html?username=" +name);
Agregué más? Username = "+ nombre después de la URL, lo que significa que se agregará un nombre de usuario de parámetro a la página de inicio. El valor de este parámetro es nombre, y este nombre es lo que debe mostrar.
Mira el código importante en la página de inicio.
<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>
El contenido que quiero mostrar se coloca en <span class="DynamicUsername"></span>este contenedor.
Eche un vistazo a cómo está escrito el js de esta página. Según nuestro pensamiento, esta página es para obtener el enlace visitado y luego operarlo.
// 获取 被访问时的 url
var ur = location.href;
// 获取该url = 后面的name
var type = ur.split('?')[1].split("=")[1];
//为其设置文本
$('.DynamicUsername').text(type);
De hecho, es esencialmente el mismo que el primer método para pasar el valor, la diferencia es el nombre dinámico que se pasa aquí.
3. Valor de transferencia (múltiple)
url="https://www.baidu.com?data=123&data2=456&data3=789"
4. Pasar variables (múltiples)
url="https://www.baidu.com?data1=" + ‘变量1’ + ‘&data2=’ + '变量2' + ‘&data3=’ + '变量3'
La idea básica es la misma que la anterior, pero el funcionamiento es más complicado, así que no daré un ejemplo.
Creo que cuando vea esto, debería poder usar este tipo de transferencia de parámetros y obtener la operación de parámetros.
Parte del contenido de este artículo se basa en el contenido de los siguientes enlaces y adjunte el enlace original
https://blog.csdn.net/qq_38822390/article/details/88037772
https://blog.csdn.net/zhangjinhuang/ artículo / detalles / 24440931
https://blog.csdn.net/weixin_44130308/article/details/102580330