Hinzufügen eines Parameters zur URL mit JavaScript

Question

In einer Webanwendung, die AJAX-Aufrufe verwendet, muss ich eine Anforderung übermitteln, aber zum Beispiel einen Parameter am Ende der URL hinzufügen:

Ursprüngliche URL:

http://server/myapp.php?id=10

Resultierende URL:

http://server/myapp.php?id=10 &enabled=true

Gesucht wird eine JavaScript-Funktion, die die URL unter Berücksichtigung der einzelnen Parameter analysiert und dann den neuen Parameter hinzufügt oder den Wert aktualisiert, wenn bereits einer vorhanden ist.

Answer 1

Sie können eine der folgenden Möglichkeiten nutzen:

• https://developer.mozilla.org/en-US/docs/Web/API/URL
• https://developer.mozilla.org/en/docs/Web/API/URLSearchParams

Ejemplo:

var url = new URL("http://foo.bar/?x=1&y=2");

// If your expected result is "http://foo.bar/?x=1&y=2&x=42"
url.searchParams.append('x', 42);

// If your expected result is "http://foo.bar/?x=42&y=2"
url.searchParams.set('x', 42);

Answer 2

const urlParams = new URLSearchParams(window.location.search);

urlParams.set('order', 'date');

window.location.search = urlParams;

.set ist das erste Agrument der Schlüssel, das zweite der Wert.

Answer 3

Eine grundlegende Implementierung, die Sie anpassen müssen, würde etwa so aussehen:

function insertParam(key, value) {
    key = encodeURIComponent(key);
    value = encodeURIComponent(value);

    // kvp looks like ['key1=value1', 'key2=value2', ...]
    var kvp = document.location.search.substr(1).split('&');
    let i=0;

    for(; i<kvp.length; i++){
        if (kvp[i].startsWith(key + '=')) {
            let pair = kvp[i].split('=');
            pair[1] = value;
            kvp[i] = pair.join('=');
            break;
        }
    }

    if(i >= kvp.length){
        kvp[kvp.length] = [key,value].join('=');
    }

    // can return this or...
    let params = kvp.join('&');

    // reload page with new params
    document.location.search = params;
}

Dies ist ungefähr doppelt so schnell wie eine Regex- oder suchbasierte Lösung, aber das hängt ganz von der Länge des Querystrings und dem Index jeder Übereinstimmung ab

---

die langsame Regex-Methode, mit der ich der Vollständigkeit halber verglichen habe (ca. +150% langsamer)

function insertParam2(key,value)
{
    key = encodeURIComponent(key); value = encodeURIComponent(value);

    var s = document.location.search;
    var kvp = key+"="+value;

    var r = new RegExp("(&|\\?)"+key+"=[^\&]*");

    s = s.replace(r,"$1"+kvp);

    if(!RegExp.$1) {s += (s.length>0 ? '&' : '?') + kvp;};

    //again, do what you will here
    document.location.search = s;
}

Answer 4

Dies ist eine sehr einfache Lösung. Sie kontrolliert nicht das Vorhandensein von Parametern und ändert auch nicht den vorhandenen Wert. Es fügt Ihren Parameter am Ende hinzu, so dass Sie den neuesten Wert in Ihrem Back-End-Code erhalten können.

function addParameterToURL(param){
    _url = location.href;
    _url += (_url.split('?')[1] ? '&':'?') + param;
    return _url;
}

Answer 5

Ich danke Ihnen allen für Ihren Beitrag. Ich habe annakata Code und geändert, um auch den Fall einzubeziehen, dass die URL keine Abfragezeichenfolge enthält. Ich hoffe, das hilft weiter.

function insertParam(key, value) {
        key = escape(key); value = escape(value);

        var kvp = document.location.search.substr(1).split('&');
        if (kvp == '') {
            document.location.search = '?' + key + '=' + value;
        }
        else {

            var i = kvp.length; var x; while (i--) {
                x = kvp[i].split('=');

                if (x[0] == key) {
                    x[1] = value;
                    kvp[i] = x.join('=');
                    break;
                }
            }

            if (i < 0) { kvp[kvp.length] = [key, value].join('='); }

            //this will reload the page, it's likely better to store this until finished
            document.location.search = kvp.join('&');
        }
    }