How to create query parameters in JavaScript?-JS Tutorial-php.cn

How to create query parameters in JavaScript?

王林

Release： 2023-09-21 15:53:02

forward

981 people have browsed it

如何在 JavaScript 中创建查询参数？

Now the question is why we need to create query parameters using JavaScript. Let us understand it through real life examples.

For example, if you go to the Amazon website and search for any product, you will see that it automatically appends your search query to the URL. This means we need to generate query parameters from the search query.

Additionally, we can allow the user to select any value from the dropdown options. We can generate query parameters and redirect the user to a new URL based on the selected values to get the results. We will learn to create query parameters in this tutorial.

Here we will see different examples of creating query parameters.

Use encodeURIComponent() method

encodeURIComponent() method allows us to encode special characters of URL. For example, the URL does not contain spaces. Therefore, we need to replace the space character with a ' ' string, which represents the encoding format of the space character.

In addition, encodedURLComponent() is used to encode the components of the URL instead of encoding the entire URL.

grammar

Users can create query parameters following the following syntax and encode them using the encoded URI component () method.

queryString += encodeURIComponent(key) + '='
        + encodeURIComponent(value) + '&';

Copy after login

In the above syntax, key is the key set for the query parameter, and value is related to the specific key of the query parameter. We use the "=" character to separate the key and value, and the "&" character to separate the two queries.

Example 1

In the example below, we create the object and store the key-value pairs. Using the object's keys and values, we create query parameters. After that, a for-of loop iterates through the object, gets the one-to-one key-value pairs, and uses the encodedURIComponent() method to generate an encoded string.

Finally, we take a substring whose length is equal to the length of the query string -1 to remove the last "&" character.

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

Copy after login

Example 2

In this example, we take user input data as query parameters. We used the prompt() method to get user input, which gets the keys and values from the user one by one.

Afterwards, we use the encodeURIComponent() method to create the query parameters using the user input values.

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

Copy after login

In this tutorial, the user learned how to create query parameters from different data. We learned to create query parameters from object data. Additionally, we learned to use user input to create query parameters, which is very useful when adding search functionality to a website.

The above is the detailed content of How to create query parameters in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!