Einführung in URL-bezogene Inhalte in JavaScript (mit Code)

Dieser Artikel bietet Ihnen eine Einführung in URLs in JavaScript (mit Code). Freunde in Not können darauf verweisen.

Begleitet vom Ton der WeChat-Nachricht schickte Xiaosi einen Code, der besagte, dass ich nicht weiß, warum die Seitendaten nicht angefordert werden können:

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

Xiaoer sah, dass dies höchstwahrscheinlich der Fall war verursacht durch die Array-Übertragungsmethode in query, da die Back-End-Implementierung möglicherweise die folgenden Möglichkeiten zum Parsen der Array-IDs hat:[5, 6, 100]:

Klammer: ids[]=1&ids[] =2&ids[]=3
Index: ids [0]=1&ids[1]=2&ids[3]=3
Komma: ids=1,2,3
keine: ids=1&ids=2&ids= 3

Nach den vier Tests wurde das Problem gelöst, was Xiao Er auch daran erinnerte, dass Bruder Little Panda bei der Entwicklung ebenfalls auf dieses Problem gestoßen war. Nach einer Online-Suche stellte er fest, dass andere den Stringify-Direktcode im verwendeten qs-Bibliothek und habe es ohne Fehler ausprobiert. Egal wie es funktioniert, es ist beängstigend, jetzt darüber nachzudenken.

Obwohl wir jeden Tag mit URLs zu tun haben, versteht sie nicht jeder.

Nicht jeder wird sich damit befassen, warum der Code funktioniert.

Zur ursprünglichen Form zurückkehren

Verwenden Sie das URL()-Objekt, um eine URL-Adresse schnell in ihre ursprüngliche Form zurückzusetzen:

Skript

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

Ausgabe

{
    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: ""
}

Ich habe nicht erwartet, dass eine kleine URL-Adresse so viele Attribute enthält. Hier erklären wir hauptsächlich Hash und Suche.

Es wird empfohlen, die Konsole zu öffnen und das Skript auszuführen, damit Sie beim Lesen nicht nach oben und unten schauen müssen.

Host und Hostname

Scharfäugige Schüler müssen entdeckt haben, dass Host und Hostname genau gleich sind.

Erinnern Sie sich an localhost:8080, das wir in der Entwicklung häufig sehen. Die Portnummer 8080 erscheint hier, aber wenn wir normalerweise einige Websites besuchen, geben wir die Portnummer nicht an. Dies liegt daran, dass die Standard-Portnummer der URL-Adresse 80 ist. Wenn Sie also genau hinsehen, werden Sie feststellen, dass der obige Portwert leer ist.

Der Unterschied zwischen Host und Hostname besteht darin, dass bei einem Port der Host die Portnummer enthält, der Hostname jedoch nicht.

Protokoll und Ursprung

Protokoll bezieht sich auf das Protokoll. Die gebräuchlichsten sind http und https. Natürlich fügt der Browser es jetzt automatisch für Sie hinzu, wenn Sie das Protokoll nicht eingeben . URL() funktioniert jedoch nicht. Wenn Sie die Vereinbarung mitbringen, erhalten Sie eine Fehlermeldung. Origin besteht aus Protokoll und Host.

search und searchParams

Basic

?search=eine Abfrage beginnt mit dem ersten ? und endet mit dem Zeilenende oder #. Wird verwendet, um einige Daten an das Backend zu übergeben. Die Daten werden durch & und der Wert durch = getrennt. Lassen Sie es uns anhand eines Codes verstehen:

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);

Dies ist die grundlegendste Kombination von Datenpaaren in der Abfrage. Natürlich erfordern die ersten vier Array-Ausdrücke eine zusätzliche Verarbeitung, die nichts anderes als das Sammeln und Sammeln von ist Schlüssel. Werturteil. Dieser Teil wird für uns jedoch grundsätzlich vom Back-End-Framework übernommen. Das Front-End kann auch mit Bibliotheken wie qs, query-string und qss vervollständigt werden.

Exkurs: Diese Bibliotheken haben sehr wenig Code. Es lohnt sich, sie zu lesen, und Sie können etwas Neues gewinnen.

Pluszeichen und Leerzeichen

Ich weiß nicht, ob Sie bei der täglichen Nutzung von Baidu und Google auf diese Details achten:

Geben Sie https://www.baidu ein . com/s?wd=小二+pushmetop Was im Suchfeld erscheint, ist Xiaoer pushmetop, und das + in der URL-Adresse in der Adressleiste verwandelt sich auf magische Weise in ein Leerzeichen.
Geben Sie https://www.baidu.com/s?wd=小二 pushmetop ein. Im Suchfeld erscheint „Xiaoer pushmetop“ und das Leerzeichen in der URL-Adresse in der Adressleiste wird zu %20.
Geben Sie https://www.baidu.com/s?wd=小二%2Bpushmetop ein. Was im Suchfeld angezeigt wird, ist 小二+pushmetop, und %2B der URL-Adresse in der Adressleiste wird zu +.

Aus bestimmten Gründen können Sie Wikipedia über die prozentuale Codierung reservierter Zeichen informieren.

URL-Kodierung

Wenn Sie auf Links auf Websites wie Nuggets klicken, wird schnell eine URL-Adresse ähnlich http://www.pushmetop.com?redirect=xxxxx angezeigt, und Sie finden die Weiterleitung entsprechend umleiten Die Adresse besteht aus einer Reihe verstümmelter %-Zeichen. Warum ist das so?

Nehmen wir an, dass der Link, der übersprungen werden muss, www.test.com?hello=world&id=1 ist. Das Zusammenfügen des gesamten Links lautet:

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

Gemäß der ursprünglichen Definition解析值 Völlig anders als 预期值:

Geparster Wert

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

Erwarteter Wert

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

Um dieses Problem zu lösen, wurde die URL-Codierung entwickelt, um das Problem zu lösen:

encodeURIComponent() und decodeURIComponent() werden empfohlen.

Vergleicht man encodeURI() und decodeURI(), so kodiert ersteres nicht die Zeichen „; / ? : @ & = + $ , #“.

escape() und unescape() werden nicht empfohlen.

Beispiel

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教程视频栏目！

Das obige ist der detaillierte Inhalt vonEinführung in URL-bezogene Inhalte in JavaScript (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!