Heim > Artikel > Web-Frontend > Wie erstelle ich Abfrageparameter in JavaScript?
Wie erstelle ich Abfrageparameter in JavaScript?
- 王林nach vorne
- 2023-09-21 15:53:02880Durchsuche
Die Frage ist nun, warum wir Abfrageparameter mit JavaScript erstellen müssen. Lassen Sie es uns anhand von Beispielen aus dem wirklichen Leben verstehen.
Wenn Sie beispielsweise die Amazon-Website besuchen und nach einem Produkt suchen, werden Sie feststellen, dass Ihre Suchanfrage automatisch an die URL angehängt wird. Das bedeutet, dass wir Abfrageparameter aus der Suchabfrage generieren müssen.
Außerdem können wir dem Benutzer erlauben, einen beliebigen Wert aus den Dropdown-Optionen auszuwählen. Wir können Abfrageparameter generieren und den Benutzer basierend auf den ausgewählten Werten zu einer neuen URL umleiten, um die Ergebnisse zu erhalten. In diesem Tutorial lernen wir, Abfrageparameter zu erstellen.
Hier sehen wir verschiedene Beispiele für die Erstellung von Abfrageparametern.
Verwenden Sie die Methode encodeURIComponent()
Mit der MethodeencodeURIComponent() können wir Sonderzeichen der URL kodieren. Beispielsweise enthält die URL keine Leerzeichen. Daher müssen wir das Leerzeichen durch die Zeichenfolge „%20“ ersetzen, die das Codierungsformat des Leerzeichens darstellt.
Darüber hinaus wird encodedURLComponent() verwendet, um die Komponenten der URL zu kodieren, anstatt die gesamte URL zu kodieren.
Grammatik
Benutzer können Abfrageparameter gemäß der folgenden Syntax erstellen und sie mithilfe der Methode „Encoded URI Component()“ codieren.
queryString += encodeURIComponent(key) + '='
+ encodeURIComponent(value) + '&';
In der obigen Syntax ist „key“ der Schlüsselsatz für den Abfrageparameter und „value“ bezieht sich auf den spezifischen Schlüssel des Abfrageparameters. Wir verwenden das Zeichen „=“, um die Schlüssel und Werte zu trennen, und das Zeichen „&“, um die beiden Abfragen zu trennen.
Beispiel 1
Im folgenden Beispiel haben wir das Objekt erstellt und die Schlüssel-Wert-Paare gespeichert. Mithilfe der Schlüssel und Werte des Objekts erstellen wir Abfrageparameter. Danach durchläuft eine for-of-Schleife das Objekt, ruft die Eins-zu-eins-Schlüssel-Wert-Paare ab und verwendet die Methode encodedURIComponent(), um eine codierte Zeichenfolge zu generieren.
Schließlich nehmen wir eine Teilzeichenfolge, deren Länge der Länge der Abfragezeichenfolge -1 entspricht, um das letzte „&“-Zeichen zu entfernen.
<html>
<body>
<h2>Using the <i>encodedURIComponent() method</i> to Create query params using JavaScript </h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let objectData = {
'search': 'JavaScript',
'keyword': 'query params.'
}
let queryString = ""
for (let key in objectData) {
queryString += encodeURIComponent(key) + '='
+ encodeURIComponent(objectData[key]) + '&';
}
queryString = queryString.substr(0, queryString.length - 1)
output.innerHTML += "The encoded query params is " + queryString;
</script>
</body>
</html>
Beispiel 2
In diesem Beispiel verwenden wir Benutzereingabedaten als Abfrageparameter. Wir haben die Methode prompt() verwendet, um Benutzereingaben zu erhalten, die die Schlüssel und Werte nacheinander vom Benutzer abruft.
Danach verwenden wir die Methode encodeURIComponent(), um die Abfrageparameter anhand der Benutzereingabewerte zu erstellen.
<html>
<body>
<h2>Using the <i>encodedURIComponent() method</i> to Create query params of user input values</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let param1 = prompt("Enter the key for the first query", "key1");
let value1 = prompt("Enter the value for the first query", "value1");
let param2 = prompt("Enter the key for the second query", "key2");
let value2 = prompt("Enter the value for the second query", "value2");
let queryString = ""
queryString += encodeURIComponent(param1) + '='
+ encodeURIComponent(value1) + '&';
queryString += encodeURIComponent(param2) + '='
+ encodeURIComponent(value2);
output.innerHTML += "The encoded query string from the user input is " + queryString;
</script>
</body>
</html>
In diesem Tutorial haben Benutzer gelernt, wie sie Abfrageparameter aus verschiedenen Daten erstellen. Wir haben gelernt, Abfrageparameter aus Objektdaten zu erstellen. Darüber hinaus haben wir gelernt, Benutzereingaben zum Erstellen von Abfrageparametern zu verwenden, was beim Hinzufügen von Suchfunktionen zu einer Website sehr nützlich ist.
Das obige ist der detaillierte Inhalt vonWie erstelle ich Abfrageparameter in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!