数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 JavaScript 中创建查询参数？
现在，问题是我们为什么要使用 JavaScript 创建查询参数。让我们通过现实生活中的例子来理解它。
例如，如果您访问亚马逊网站并搜索任何产品，您会看到它会自动将您的搜索查询附加到 URL 中。这意味着我们需要根据搜索查询生成查询参数。
此外，我们可以允许用户从下拉选项中选择任何值。我们可以生成查询参数并根据所选值将用户重定向到新的 URL 以获取结果。在本教程中，我们将学习如何创建查询参数。
在这里，我们将看到创建查询参数的不同示例。
使用 encodeURIComponent() 方法
encodeURIComponent() 方法允许我们对 URL 的特殊字符进行编码。例如，URL 不包含空格。因此，我们需要用“%20”字符串替换空格字符，“%20”字符串表示空格字符的编码格式。
此外，encodedURLComponent() 用于对 URL 的组件进行编码，而不是对整个 URL 进行编码。
语法
用户可以按照以下语法创建查询参数并使用编码的 URI 组件 () 方法对其进行编码。
queryString += encodeURIComponent(key) + '=' + encodeURIComponent(value) + '&';
在上面的语法中，key 是要为查询参数设置的键，value 与查询参数的特定键相关。我们使用“=”字符分隔键和值，使用“&”字符分隔两个查询。
示例 1
在下面的示例中，我们创建了对象并存储了键值对。使用对象的键和值，我们创建了查询参数。之后，for-of 循环遍历对象，逐个获取键值对，并使用 encodeURIComponent() 方法生成编码字符串。
最后，我们获取了长度等于 queryString 长度 -1 的子字符串，以删除最后的“&”字符。
<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>
示例 2
在此示例中，我们获取用户输入的查询参数数据。我们使用了 prompt() 方法获取用户输入，该方法会逐个获取用户的键和值。
之后，我们使用用户输入的值，使用 encodeURIComponent() 方法创建查询参数。
<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>
在本教程中，用户学习了如何从不同的数据创建查询参数。我们学习了如何从对象数据创建查询参数。此外，我们还学习了如何使用用户输入创建查询参数，这在向网站添加搜索功能时非常有用。
2K+ 阅读量
