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

Dies war mein eigener Versuch, aber ich werde die Antwort von annakata verwenden, da sie viel sauberer erscheint:

function AddUrlParameter(sourceUrl, parameterName, parameterValue, replaceDuplicates)
{
    if ((sourceUrl == null) || (sourceUrl.length == 0)) sourceUrl = document.location.href;
    var urlParts = sourceUrl.split("?");
    var newQueryString = "";
    if (urlParts.length > 1)
    {
        var parameters = urlParts[1].split("&");
        for (var i=0; (i < parameters.length); i++)
        {
            var parameterParts = parameters[i].split("=");
            if (!(replaceDuplicates && parameterParts[0] == parameterName))
            {
                if (newQueryString == "")
                    newQueryString = "?";
                else
                    newQueryString += "&";
                newQueryString += parameterParts[0] + "=" + parameterParts[1];
            }
        }
    }
    if (newQueryString == "")
        newQueryString = "?";
    else
        newQueryString += "&";
    newQueryString += parameterName + "=" + parameterValue;

    return urlParts[0] + newQueryString;
}

Außerdem fand ich dieses jQuery-Plugin aus einem anderen Beitrag auf Stackoverflow, und wenn Sie mehr Flexibilität benötigen, könnten Sie das verwenden: http://plugins.jquery.com/project/query-object

Ich würde denken, der Code wäre (habe ich nicht getestet):

return $.query.parse(sourceUrl).set(parameterName, parameterValue).toString();

Answer 2

Überprüfen Sie https://github.com/derek-watson/jsUri

Uri und Query String Manipulation in Javascript.

Dieses Projekt enthält die ausgezeichnete parseUri-Bibliothek für reguläre Ausdrücke von Steven Levithan. Sie können URLs aller Formen und Größen sicher parsen, egal wie ungültig oder hässlich sie sind.

Answer 3

Versuchen Sie dies.

// uses the URL class
function setParam(key, value) {
            let url = new URL(window.document.location);
            let params = new URLSearchParams(url.search.slice(1));

            if (params.has(key)) {
                params.set(key, value);
            }else {
                params.append(key, value);
            }
        }

Answer 4

Es behandelt solche URLs:

• leer
• hat keine Parameter
• haben bereits einige Parameter
• tienen ? am Ende, hat aber gleichzeitig keine Parameter

Solche URL's werden nicht verarbeitet:

• mit Fragmentbezeichner (d.h. Raute, #)
• wenn die URL bereits den erforderlichen Abfrageparameter enthält (dann gibt es ein Duplikat)

Arbeitet in:

• Chrom 32+
• Firefox 26+

• Safari 7.1+

  function appendQueryParameter(url, name, value) { if (url.length === 0) { return; }

  let rawURL = url;
  
  // URL with `?` at the end and without query parameters
  // leads to incorrect result.
  if (rawURL.charAt(rawURL.length - 1) === "?") {
      rawURL = rawURL.slice(0, rawURL.length - 1);
  }
  
  const parsedURL = new URL(rawURL);
  let parameters = parsedURL.search;
  
  parameters += (parameters.length === 0) ? "?" : "&";
  parameters = (parameters + name + "=" + value);
  
  return (parsedURL.origin + parsedURL.pathname + parameters);

  }

Version mit ES6-Vorlagen-Strings.

Arbeitet in:

• Chrom 41+
• Firefox 32+

• Safari 9.1+

  function appendQueryParameter(url, name, value) { if (url.length === 0) { return; }

  let rawURL = url;
  
  // URL with `?` at the end and without query parameters
  // leads to incorrect result.
  if (rawURL.charAt(rawURL.length - 1) === "?") {
      rawURL = rawURL.slice(0, rawURL.length - 1);
  }
  
  const parsedURL = new URL(rawURL);
  let parameters = parsedURL.search;
  
  parameters += (parameters.length === 0) ? "?" : "&";
  parameters = `${parameters}${name}=${value}`;
  
  return `${parsedURL.origin}${parsedURL.pathname}${parameters}`;

  }

Answer 5

Die folgenden:

• Führt doppelte Query-String-Parameter zusammen
• Funktioniert mit absoluten und relativen URLs

• Funktioniert im Browser und im Knoten

  /**

  • Adds query params to existing URLs (inc merging duplicates)
  • @param {string} url - src URL to modify
  • @param {object} params - key/value object of params to add

  • @returns {string} modified URL */ function addQueryParamsToUrl(url, params) {

    // if URL is relative, we'll need to add a fake base var fakeBase = !url.startsWith('http') ? 'http://fake-base.com' : undefined; var modifiedUrl = new URL(url || '', fakeBase);

    // add/update params Object.keys(params).forEach(function(key) { if (modifiedUrl.searchParams.has(key)) { modifiedUrl.searchParams.set(key, params[key]); } else { modifiedUrl.searchParams.append(key, params[key]); } });

    // return as string (remove fake base if present) return modifiedUrl.toString().replace(fakeBase, ''); }

Beispiele:

// returns /guides?tag=api
addQueryParamsToUrl('/guides?tag=hardware', { tag:'api' })

// returns https://orcascan.com/guides?tag=api
addQueryParamsToUrl('https://orcascan.com/guides?tag=hardware', { tag: 'api' })