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

Mit dieser Lösung wird die aktuelle URL des Fensters mit den aktualisierten Suchparametern aktualisiert, ohne dass die Seite tatsächlich neu geladen wird. Dieser Ansatz ist in einem PWA/SPA-Kontext nützlich.

function setURLSearchParam(key, value) {
  const url = new URL(window.location.href);
  url.searchParams.set(key, value);
  window.history.pushState({ path: url.href }, '', url.href);
}

Answer 2

Manchmal sehen wir ? am Ende der URL habe ich einige Lösungen gefunden, die folgende Ergebnisse liefern file.php?&foo=bar . ich kam mit meiner eigenen Lösung arbeiten perfekt wie ich will!

location.origin + location.pathname + location.search + (location.search=='' ? '?' : '&') + 'lang=ar'

Nota: Standort.Herkunft funktioniert nicht im IE, hier ist die Lösung .

Answer 3

Die folgende Funktion hilft Ihnen beim Hinzufügen, Aktualisieren und Löschen von Parametern zu oder aus einer URL.

//Beispiel1und

var myURL = '/search';

myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?location=california

myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?location=new%20york

myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search

//Beispiel2

var myURL = '/search?category=mobile';

myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?category=mobile&location=california

myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?category=mobile&location=new%20york

myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search?category=mobile

//Beispiel3

var myURL = '/search?location=texas';

myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?location=california

myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?location=new%20york

myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search

//Beispiel4

var myURL = '/search?category=mobile&location=texas';

myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?category=mobile&location=california

myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?category=mobile&location=new%20york

myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search?category=mobile

//Beispiel5

var myURL = 'https://example.com/search?location=texas#fragment';

myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?location=california#fragment

myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?location=new%20york#fragment

myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search#fragment

Hier ist die Funktion.

function updateUrl(url,key,value){
      if(value!==undefined){
        value = encodeURI(value);
      }
      var hashIndex = url.indexOf("#")|0;
      if (hashIndex === -1) hashIndex = url.length|0;
      var urls = url.substring(0, hashIndex).split('?');
      var baseUrl = urls[0];
      var parameters = '';
      var outPara = {};
      if(urls.length>1){
          parameters = urls[1];
      }
      if(parameters!==''){
        parameters = parameters.split('&');
        for(k in parameters){
          var keyVal = parameters[k];
          keyVal = keyVal.split('=');
          var ekey = keyVal[0];
          var evalue = '';
          if(keyVal.length>1){
              evalue = keyVal[1];
          }
          outPara[ekey] = evalue;
        }
      }

      if(value!==undefined){
        outPara[key] = value;
      }else{
        delete outPara[key];
      }
      parameters = [];
      for(var k in outPara){
        parameters.push(k + '=' + outPara[k]);
      }

      var finalUrl = baseUrl;

      if(parameters.length>0){
        finalUrl += '?' + parameters.join('&'); 
      }

      return finalUrl + url.substring(hashIndex); 
  }

Answer 4

Dies ist eine einfache Möglichkeit, einen Abfrageparameter hinzuzufügen:

const query = new URLSearchParams(window.location.search);
query.append("enabled", "true");

Und das war's mehr hier .

Bitte beachten Sie die Supportspezifikationen .

Answer 5

Ergänzend zur Antwort von @Vianney https://stackoverflow.com/a/44160941/6609678

Wir können importieren Sie das Modul Built-in URL in node wie folgt

const { URL } = require('url');

Ejemplo:

Terminal $ node
> const { URL } = require('url');
undefined
> let url = new URL('', 'http://localhost:1989/v3/orders');
undefined
> url.href
'http://localhost:1989/v3/orders'
> let fetchAll=true, timePeriod = 30, b2b=false;
undefined
> url.href
'http://localhost:1989/v3/orders'
>  url.searchParams.append('fetchAll', fetchAll);
undefined
>  url.searchParams.append('timePeriod', timePeriod);
undefined
>  url.searchParams.append('b2b', b2b);
undefined
> url.href
'http://localhost:1989/v3/orders?fetchAll=true&timePeriod=30&b2b=false'
> url.toString()
'http://localhost:1989/v3/orders?fetchAll=true&timePeriod=30&b2b=false'

Nützliche Links:

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