Introduction au contenu lié aux URL en JavaScript (avec code)

Cet article vous présente une introduction aux URL en JavaScript (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Accompagné de l'invite du message WeChat, Xiaosi a envoyé un morceau de code disant que je ne sais pas pourquoi les données de la page ne peuvent pas être demandées :

axios.get('users', {
    params: { ids: [1, 2, 3] }
})

Xiaoer a vu que c'était très probablement la méthode de transfert de tableau dans la requête. Causée par l'implémentation back-end de l'analyse des identifiants de tableau :[5, 6, 100], il peut y avoir les manières suivantes :

support : ids[]=1&ids[] =2&ids[]=3
index : ids[0]=1&ids[1]=2&ids[3]=3
virgule : ids=1,2,3
aucun : ids=1&ids=2&ids= 3

Petits quatre respectivement Après les tests, le problème a été résolu. Cela a également rappelé à Xiao Er que Frère Petit Panda avait également rencontré ce problème lors du développement. Après une recherche en ligne, il a découvert que d'autres utilisaient le code direct stringify. la bibliothèque qs et je l'ai essayé sans aucune erreur. Quoi qu'il en soit, le problème a été résolu. C'est effrayant d'y penser maintenant.

Bien que nous traitions des URL tous les jours, tout le monde ne les comprend pas.

Tout le monde n’expliquera pas pourquoi le code fonctionne.

Retour à la forme originale

Utilisez l'objet URL() pour renvoyer rapidement une adresse URL à sa forme originale :

Script

const url = new URL('http://www.pushme.top/users?sort_by=asc#page=userlist')
console.log(url)

Sortie

{
    hash: "#page=userlist"
    host: "www.pushme.top"
    hostname: "www.pushme.top"
    href: "http://www.pushme.top/users?sort_by=asc#page=userlist"
    origin: "http://www.pushme.top"
    password: ""
    pathname: "/users"
    port: ""
    protocol: "http:"
    search: "?sort_by=asc"
    searchParams: URLSearchParams {}
    username: ""
}

Je ne m'attendais pas à ce qu'il y ait autant d'attributs dans une petite adresse URL. Ici, nous expliquerons principalement le hachage et la recherche.

Il est recommandé d'ouvrir la console et d'exécuter le script, afin de ne pas avoir à regarder de haut en bas lors de la lecture.

hôte et nom d'hôte

Les étudiants aux yeux perçants doivent avoir découvert que l'hôte et le nom d'hôte sont exactement les mêmes. Pourquoi est-ce ?

Rappelez-vous localhost:8080 que l'on voit souvent en développement. Le numéro de port 8080 apparaît ici, mais lorsque nous visitons habituellement certains sites Web, nous n'apportons pas le numéro de port. En effet, le numéro de port par défaut de l'adresse URL est 80, donc si vous regardez attentivement, vous constaterez que la valeur du port ci-dessus est vide.

La différence entre l'hôte et le nom d'hôte est que lorsqu'il y a un port, l'hôte inclura le numéro de port, mais pas le nom d'hôte.

protocole et origine

le protocole fait référence au protocole. Les plus courants sont http et https. Bien sûr, désormais le navigateur l'ajoutera automatiquement pour vous lorsque vous n'entrez pas le protocole. Cependant, URL() ne le fait pas. Si vous apportez l'accord, vous obtiendrez une erreur. L'origine est composée du protocole et de l'hôte.

search et searchParams

Basic

?search=a dans la requête commence par le premier ? et se termine par la fin de la ligne ou #. Utilisé pour transmettre certaines données au backend. Les données sont séparées par & et la valeur est séparée par =. Comprenons-le à travers un morceau de code :

const query = 'id=1&sort=asc&hello=world';
// 对 & 分割取得数据对
const data = query.split('&').reduce((data,keyValue) => {
    const [ key, value ] = keyValue.split('=');
    return (data[key] = value, data);
}, {});

// 输出 {id: "1", sort: "asc", hello: "world"}
console.log(data);

Il s'agit de la combinaison la plus basique de paires de données dans la requête. Bien entendu, les quatre premières expressions de tableaux nécessitent un traitement supplémentaire, qui n'est rien de plus que la clé. . Recouvrement et jugement de valeur. Cependant, cette partie est essentiellement gérée par le framework back-end pour nous. Le front-end peut également être complété à l'aide de bibliothèques telles que qs, query-string et qss.

Digression : Ces bibliothèques ont très peu de code. Cela vaut la peine d'être lu et vous pourriez gagner quelque chose de nouveau.

Signe plus et espace

Je ne sais pas si vous faites attention à ces détails lorsque vous utilisez Baidu et Google tous les jours :

Entrez https://www.baidu . com/s?wd=小二+pushmetop Ce qui apparaît dans la zone de recherche est Xiaoer pushmetop, et le + dans l'adresse URL dans la barre d'adresse se transforme comme par magie en espace.
Entrez https://www.baidu.com/s?wd=小二 pushmetop. Ce qui apparaît dans le champ de recherche est Xiaoer pushmetop, et l'espace dans l'adresse URL dans la barre d'adresse devient %20.
Entrez https://www.baidu.com/s?wd=小二%2Bpushmetop. Ce qui apparaît dans le champ de recherche est 小二+pushmetop, et le %2B de l'adresse URL dans la barre d'adresse devient +.

Pour des raisons spécifiques, vous pouvez consulter Wikipédia pour connaître le pourcentage d'encodage des caractères réservés.

Encodage d'URL

Cliquer sur des liens sur des sites Web tels que Nuggets fera rapidement clignoter une adresse URL similaire à http://www.pushmetop.com?redirect=xxxxx, et vous trouverez la redirection correspondant à la redirection L'adresse sera un tas de caractères % tronqués. Pourquoi ?

Supposons que le lien qui doit être sauté est www.test.com?hello=world&id=1. L'assemblage du lien entier est :

http://www.pushmetop.com?redirect=www.test.com?hello=world&id=1

Selon l'initiale. définition解析值 et 预期值 sont complètement différents :

Valeur d'analyse

{
    "redirect": "www.test.com?hello=world",
    "id": "1"
}

Valeur attendue

{
    "redirect": "www.test.com?hello=world&id=1"
}

Afin de résoudre ce problème, l'encodage d'URL a été né pour résoudre le problème :

encodeURIComponent() et decodeURIComponent() sont recommandés.

En comparant encodeURI() et decodeURI(), le premier ne codera pas les caractères "; / ? : @ & = + $ , #".

escape() et unescape() ne sont pas recommandés.

Exemple

let redirect = 'www.test.com?hello=world&id=1';
redirect = encodeURIComponent(redirect);

let url = `http://www.pushmetop.com?redirect=${redirect}`;
url = new URL(url)

// 输出: www.test.com?hello=world&id=1
console.log(url.searchParams.get('redirect'))

hash

#hash 中 fragment 以 # 为开始 行尾 为结束。在 回到顶部 中有提到过利用hash锚点来进行跳转，如果大家注意观察的话会发现 hash 的改变不会引起页面的刷新。

在 Angular.js、Vue Router 等库中，会利用在 html5 中提供了 history 的一系列操作，来帮助我们不刷新页面管理  url。但是在一些旧的浏览器上并不兼容时，会利用 hash 不会主动触发浏览器 reload 的特性来修改 location.hash 来管理路由。 当然 hash 的另外一个特点是可以被保存为书签，也是一大优点。

hash 的小妙用也可以像 query 那样利用 & 和 = 来存取数据，当然你也可以定制属于你的规则。

href 和 pathname

href 为整个 url地址。而 pathname 属性包含 URL 的整个路径部分。它跟在 host （包括 port）后面，排在 query 或 hash 组成部分的前面且被 ASCII 问号（?）或哈希字符（#）分隔。

username 和 password

username 和 password 在日常使用中很少用，它们可以合称为 auth。该字符串跟在 protocol 和双斜杠（如果有）的后面，排在 host 部分的前面且被一个 ASCII 的 at 符号（@）分隔：

http://username:password@www.pushme.top/test/blah?something=123

结尾

本来只是想讨论 hash 和 search ，结果全都过一遍，今天就辛苦大家了。

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的的JavaScript教程视频栏目！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!