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

Hier ist eine stark vereinfachte Version, die Kompromisse für die Lesbarkeit und weniger Codezeilen anstelle von mikro-optimierten Leistung (und wir sprechen über ein paar Millisekunden Unterschied, realistisch ... aufgrund der Art dieser (Betrieb auf dem aktuellen Dokument der Lage), wird dies wahrscheinlich einmal auf einer Seite ausgeführt werden).

/**
* Add a URL parameter (or changing it if it already exists)
* @param {search} string  this is typically document.location.search
* @param {key}    string  the key to set
* @param {val}    string  value 
*/
var addUrlParam = function(search, key, val){
  var newParam = key + '=' + val,
      params = '?' + newParam;

  // If the "search" string exists, then build params from it
  if (search) {
    // Try to replace an existance instance
    params = search.replace(new RegExp('([?&])' + key + '[^&]*'), '$1' + newParam);

    // If nothing was replaced, then add the new param to the end
    if (params === search) {
      params += '&' + newParam;
    }
  }

  return params;
};

Sie würden dies dann wie folgt verwenden:

document.location.pathname + addUrlParam(document.location.search, 'foo', 'bar');

Answer 2

Es gibt eine eingebaute Funktion in URL Klasse, die Sie für den einfachen Umgang mit Abfrage-String-Schlüssel/Wert-Parameter verwenden können:

const url = new URL(window.location.href);
// url.searchParams has several function, we just use `set` function
// to set a value, if you just want to append without replacing value
// let use `append` function

url.searchParams.set('key', 'value');

console.log(url.search) // <== '?key=value'

// if window.location.href has already some qs params this `set` function
// modify or append key/value in it

Für weitere Informationen über searchParams functions .

URL im IE nicht unterstützt wird, prüfen Sie Kompatibilität

Answer 3

/**
* Add a URL parameter 
* @param {string} url 
* @param {string} param the key to set
* @param {string} value 
*/
var addParam = function(url, param, value) {
   param = encodeURIComponent(param);
   var a = document.createElement('a');
   param += (value ? "=" + encodeURIComponent(value) : ""); 
   a.href = url;
   a.search += (a.search ? "&" : "") + param;
   return a.href;
}

/**
* Add a URL parameter (or modify if already exists)
* @param {string} url 
* @param {string} param the key to set
* @param {string} value 
*/
var addOrReplaceParam = function(url, param, value) {
   param = encodeURIComponent(param);
   var r = "([&?]|&)" + param + "\\b(?:=(?:[^&#]*))*";
   var a = document.createElement('a');
   var regex = new RegExp(r);
   var str = param + (value ? "=" + encodeURIComponent(value) : ""); 
   a.href = url;
   var q = a.search.replace(regex, "$1"+str);
   if (q === a.search) {
      a.search += (a.search ? "&" : "") + str;
   } else {
      a.search = q;
   }
   return a.href;
}

url = "http://www.example.com#hashme";
newurl = addParam(url, "ciao", "1");
alert(newurl);

Bitte beachten Sie, dass die Parameter kodiert werden sollten, bevor sie an die Abfragezeichenfolge angehängt werden.

http://jsfiddle.net/48z7z4kx/

Answer 4

Ich habe eine "Klasse", die dies tut, und hier ist sie:

function QS(){
    this.qs = {};
    var s = location.search.replace( /^\?|#.*$/g, '' );
    if( s ) {
        var qsParts = s.split('&');
        var i, nv;
        for (i = 0; i < qsParts.length; i++) {
            nv = qsParts[i].split('=');
            this.qs[nv[0]] = nv[1];
        }
    }
}

QS.prototype.add = function( name, value ) {
    if( arguments.length == 1 && arguments[0].constructor == Object ) {
        this.addMany( arguments[0] );
        return;
    }
    this.qs[name] = value;
}

QS.prototype.addMany = function( newValues ) {
    for( nv in newValues ) {
        this.qs[nv] = newValues[nv];
    }
}

QS.prototype.remove = function( name ) {
    if( arguments.length == 1 && arguments[0].constructor == Array ) {
        this.removeMany( arguments[0] );
        return;
    }
    delete this.qs[name];
}

QS.prototype.removeMany = function( deleteNames ) {
    var i;
    for( i = 0; i < deleteNames.length; i++ ) {
        delete this.qs[deleteNames[i]];
    }
}

QS.prototype.getQueryString = function() {
    var nv, q = [];
    for( nv in this.qs ) {
        q[q.length] = nv+'='+this.qs[nv];
    }
    return q.join( '&' );
}

QS.prototype.toString = QS.prototype.getQueryString;

//examples
//instantiation
var qs = new QS;
alert( qs );

//add a sinle name/value
qs.add( 'new', 'true' );
alert( qs );

//add multiple key/values
qs.add( { x: 'X', y: 'Y' } );
alert( qs );

//remove single key
qs.remove( 'new' )
alert( qs );

//remove multiple keys
qs.remove( ['x', 'bogus'] )
alert( qs );

Ich habe die toString-Methode überschrieben, so dass es nicht notwendig ist, QS::getQueryString aufzurufen. Sie können QS::toString verwenden oder, wie ich es in den Beispielen getan habe, sich einfach darauf verlassen, dass das Objekt in einen String umgewandelt wird.

Answer 5

Wenn Sie eine Zeichenkette mit url haben, die Sie mit einem Parameter ausschmücken möchten, können Sie dies versuchen:

urlstring += ( urlstring.match( /[\?]/g ) ? '&' : '?' ) + 'param=value';

Dies bedeutet, dass ? wird das Präfix des Parameters sein, aber wenn Sie bereits eine ? en urlstring als & wird das Präfix sein.

Ich würde auch empfehlen, Folgendes zu tun encodeURI( paramvariable ) wenn Sie den Parameter nicht fest einkodiert haben, er sich aber innerhalb einer paramvariable ; oder wenn Sie lustige Figuren darin haben.

参照 javascript URL-Kodierung für die Nutzung des encodeURI Funktion.