jQuery add param to url function

This jQuery utility function efficiently checks for a parameter in the current URL. If absent, it appends the parameter and returns the complete, updated URL. This is particularly useful for AJAX requests updating a database and subsequently redirecting to the same page, but with a flag indicating successful update (e.g., to display a confirmation message).

<code class="language-javascript">(function($,W,D){
    var JQUERY4U = {};

    JQUERY4U.UTIL = {
        /**
         * Appends a parameter to a URL if it doesn't already exist.
         * @param {string} param - The parameter name to add.
         * @param {string} value - The parameter value.
         * @returns {string} The URL with the appended parameter.
         */
        addParamToUrl: function(param, value){
            // Check if parameter exists
            var regex = new RegExp(param + "=([^&]*)", "i");
            var existingParam = regex.exec(W.location.search);
            var existingValue = existingParam && existingParam[1] || "";

            // Construct the URL
            var loc = W.location;
            var url = loc.protocol + '//' + loc.host + loc.pathname + loc.search;

            // Add parameter if it doesn't exist
            if (existingValue === ''){
                url += (loc.search === '' ? '?' : '&') + param + '=' + value;
            }

            return url;
        }
    };

    // Example usage:
    var newUrl = JQUERY4U.UTIL.addParamToUrl('updated', 'true');
    console.log(newUrl);
    // Input: http://jquery4u.com/index.php
    // Output: http://jquery4u.com/index.php?updated=true

})(jQuery, window, document);</code>

Frequently Asked Questions (FAQs) about jQuery URL Parameter Manipulation

Adding Multiple Parameters with jQuery

To add multiple parameters, leverage jQuery's $.param() method to serialize data objects into URL-encoded strings:

<code class="language-javascript">var data = { param1: "value1", param2: "value2" };
var url = "http://example.com/page?" + $.param(data); </code>

Removing Parameters from a URL

jQuery doesn't directly support URL parameter removal. Use JavaScript's URL and URLSearchParams objects instead:

<code class="language-javascript">let url = new URL("http://example.com/page?param1=value1&param2=value2");
url.searchParams.delete('param1');</code>

Checking for Parameter Existence

Use URLSearchParams.has() to efficiently check if a parameter exists:

<code class="language-javascript">let url = new URL("http://example.com/page?param1=value1&param2=value2");
let hasParam1 = url.searchParams.has('param1'); // true</code>

Modifying Parameter Values

Change parameter values using URLSearchParams.set():

<code class="language-javascript">let url = new URL("http://example.com/page?param1=value1&param2=value2");
url.searchParams.set('param1', 'newValue1');</code>

Adding Parameters without Page Reload

Use window.history.pushState() to update the URL without a full page refresh:

<code class="language-javascript">
let url = new URL(window.location.href);
url.searchParams.append('param1', 'value1');
window.history.pushState({}, '', url);
```  Remember that this only updates the URL in the browser's address bar; you'll need to handle any client-side updates based on the new URL parameters separately.</code>

The above is the detailed content of jQuery add param to url function. For more information, please follow other related articles on the PHP Chinese website!