How To Add Query String To Url In Jquery

In this blog post, we will learn how to add a query string to a URL using jQuery. A query string is a part of the URL that assigns values to specified parameters. It usually starts with a question mark (?) followed by key-value pairs, which are separated by an equal sign (=). Multiple key-value pairs are separated by an ampersand (&).

For example, consider the following URL with a query string:

Here, we have a query string with two parameters – parameter1 and parameter2 – and their respective values being value1 and value2.

Adding Query String to URL using jQuery

To add a query string to a URL using jQuery, we can create a function called addQueryString that takes two arguments – url and params. The url argument represents the base URL, and the params argument is an object containing key-value pairs of the parameters and their values. The function will return a URL with the query string appended.

Here’s the code for the addQueryString function:

function addQueryString(url, params) {
    var queryString = $.param(params);
    if (url.indexOf('?') !== -1) {
        url += '&' + queryString;
    } else {
        url += '?' + queryString;
    return url;

To use the addQueryString function, you need to include the jQuery library in your HTML file, as the function uses the $.param() method provided by jQuery:

<script src=""></script>

Example Usage

Let’s say we have the following URL and parameters:

- parameter1: value1
- parameter2: value2

To add the query string to the URL, we can pass the URL and parameters to the addQueryString function:

var url = "";
var params = {
    parameter1: "value1",
    parameter2: "value2"

var urlWithQueryString = addQueryString(url, params);
console.log(urlWithQueryString); // Output:

And that’s it! Now you know how to add a query string to a URL using jQuery. This function can be very useful when you need to create URLs with dynamic values for parameters.