Wie kann ich einen Abfrage-String-Parameter hinzufügen oder aktualisieren?

Question

Wie kann ich mit Javascript einen Query-String-Parameter zur URL hinzufügen, wenn er nicht vorhanden ist, oder wenn er vorhanden ist, den aktuellen Wert aktualisieren? Ich bin mit Jquery für meine Client-Seite Entwicklung.

Answer 1

Auf dieser Seite gibt es eine Menge umständlicher und unnötig komplizierter Antworten. Die am höchsten bewertete, die von @amateur, ist recht gut, obwohl sie ein paar unnötige Flusen in der RegExp enthält. Hier ist eine etwas optimalere Lösung mit einer saubereren RegExp und einem saubereren replace anrufen:

function updateQueryStringParamsNoHash(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=[^&]*", "i");
  return re.test(uri)
       ? uri.replace(re, '$1' + key + "=" + value)
       : uri + separator + key + "=" + value
  ;
}

Ein zusätzlicher Bonus ist, wenn uri keine Zeichenkette ist, erhalten Sie keine Fehlermeldung, wenn Sie versuchen, die match o replace auf etwas, das diese Methoden möglicherweise nicht implementiert.

Und wenn Sie den Fall eines Hashes behandeln wollen (und Sie haben bereits eine Prüfung auf korrekt formatiertes HTML durchgeführt), können Sie die vorhandene Funktion nutzen, anstatt eine neue Funktion mit derselben Logik zu schreiben:

function updateQueryStringParams(url, key, value) {
    var splitURL = url.split('#');
    var hash = splitURL[1];
    var uri = updateQueryStringParamsNoHash(splitURL[0]);
    return hash == null ? uri : uri + '#' + hash;
}

Oder Sie können die ansonsten ausgezeichnete Antwort von @Adam leicht abändern:

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=[^&#]*", "i");
  if (re.test(uri)) {
    return uri.replace(re, '$1' + key + "=" + value);
  } else {
    var matchData = uri.match(/^([^#]*)(#.*)?$/);
    var separator = /\?/.test(uri) ? "&" : "?";    
    return matchData[0] + separator + key + "=" + value + (matchData[1] || '');
  }
}

Answer 2

Wenn Sie mehrere Parameter auf einmal einstellen wollen:

function updateQueryStringParameters(uri, params) {
    for(key in params){
      var value = params[key],
          re = new RegExp("([?&])" + key + "=.*?(&|$)", "i"),
          separator = uri.indexOf('?') !== -1 ? "&" : "?";
      if (uri.match(re)) {
        uri = uri.replace(re, '$1' + key + "=" + value + '$2');
      }
      else {
        uri = uri + separator + key + "=" + value;
      }
    }
    return uri;
}

gleiche Funktion wie @amateur's

Wenn jslint eine Fehlermeldung ausgibt, fügen Sie Folgendes nach der for-Schleife ein

if(params.hasOwnProperty(key))

Answer 3

Hier ist eine alternative Methode, die die eingebauten Eigenschaften des HTML-Elements anchor verwendet:

• Behandelt mehrfach bewertete Parameter.
• Es besteht keine Gefahr, dass das #-Fragment oder irgendetwas anderes als der Abfrage-String selbst geändert wird.

• Vielleicht ist es etwas leichter zu lesen? Aber sie ist länger.

  var a = document.createElement('a'),
  
  getHrefWithUpdatedQueryString = function(param, value) {
      return updatedQueryString(window.location.href, param, value);
  },
  
  updatedQueryString = function(url, param, value) {
      /*
       A function which modifies the query string 
           by setting one parameter to a single value.
  
       Any other instances of parameter will be removed/replaced.
       */
      var fragment = encodeURIComponent(param) + 
                         '=' + encodeURIComponent(value);
  
      a.href = url;
  
      if (a.search.length === 0) {
      a.search = '?' + fragment;
      } else {
      var didReplace = false,
          // Remove leading '?'
          parts = a.search.substring(1)
      // Break into pieces
          .split('&'),
  
          reassemble = [],
          len = parts.length;
  
      for (var i = 0; i < len; i++) {
  
          var pieces = parts[i].split('=');
          if (pieces[0] === param) {
          if (!didReplace) {
              reassemble.push('&' + fragment);
              didReplace = true;
          }
          } else {
          reassemble.push(parts[i]);
          }
      }
  
      if (!didReplace) {
          reassemble.push('&' + fragment);
      }
  
      a.search = reassemble.join('&');
      }
  
      return a.href;
  };

Answer 4

Java-Skriptcode, um eine bestimmte Abfragezeichenfolge zu finden und ihren Wert zu ersetzen *

('input.letter').click(function () {
                //0- prepare values
                var qsTargeted = 'letter=' + this.value; //"letter=A";
                var windowUrl = '';
                var qskey = qsTargeted.split('=')[0];
                var qsvalue = qsTargeted.split('=')[1];
                //1- get row url
                var originalURL = window.location.href;
                //2- get query string part, and url
                if (originalURL.split('?').length > 1) //qs is exists
                {
                    windowUrl = originalURL.split('?')[0];
                    var qs = originalURL.split('?')[1];
                    //3- get list of query strings
                    var qsArray = qs.split('&');
                    var flag = false;
                    //4- try to find query string key
                    for (var i = 0; i < qsArray.length; i++) {
                        if (qsArray[i].split('=').length > 0) {
                            if (qskey == qsArray[i].split('=')[0]) {
                                //exists key
                                qsArray[i] = qskey + '=' + qsvalue;
                                flag = true;
                                break;
                            }
                        }
                    }
                    if (!flag)//   //5- if exists modify,else add
                    {
                        qsArray.push(qsTargeted);
                    }
                    var finalQs = qsArray.join('&');
                    //6- prepare final url
                    window.location = windowUrl + '?' + finalQs;
                }
                else {
                    //6- prepare final url
                    //add query string
                    window.location = originalURL + '?' + qsTargeted;
                }
            })
        });

Answer 5

Ja, ich hatte ein Problem, wo meine Querystring würde überlaufen und duplizieren, aber dies war aufgrund meiner eigenen Trägheit. so spielte ich ein bisschen und arbeitete einige js Jquery (actualy Sizzle) und C # Magick.

Also habe ich gerade festgestellt, dass, nachdem der Server mit den übergebenen Werten fertig ist, die Werte keine Rolle mehr spielen, es gibt keine Wiederverwendung, wenn der Client die gleiche Sache offensichtlich tun wollte, wird es immer eine neue Anfrage sein, auch wenn es die gleichen Parameter übergeben werden. Und das ist alles clientseitig, so dass einige Caching/Cookies etc könnte in dieser Hinsicht cool sein.

JS:

$(document).ready(function () {
            $('#ser').click(function () {
                SerializeIT();
            });
            function SerializeIT() {
                var baseUrl = "";
                baseUrl = getBaseUrlFromBrowserUrl(window.location.toString());
                var myQueryString = "";
                funkyMethodChangingStuff(); //whatever else before serializing and creating the querystring
                myQueryString = $('#fr2').serialize();
                window.location.replace(baseUrl + "?" + myQueryString);
            }
            function getBaseUrlFromBrowserUrl(szurl) {
                return szurl.split("?")[0];
            } 
            function funkyMethodChangingStuff(){
               //do stuff to whatever is in fr2
            }
        });

HTML:

<div id="fr2">
   <input type="text" name="qURL" value="http://somewhere.com" />
   <input type="text" name="qSPart" value="someSearchPattern" />
</div>
<button id="ser">Serialize! and go play with the server.</button>

C#:

    using System.Web;
    using System.Text;
    using System.Collections.Specialized;

    public partial class SomeCoolWebApp : System.Web.UI.Page
    {
        string weburl = string.Empty;
        string partName = string.Empty;

        protected void Page_Load(object sender, EventArgs e)
        {
            string loadurl = HttpContext.Current.Request.RawUrl;
            string querySZ = null;
            int isQuery = loadurl.IndexOf('?');
            if (isQuery == -1) { 
                //If There Was no Query
            }
            else if (isQuery >= 1) {
                querySZ = (isQuery < loadurl.Length - 1) ? loadurl.Substring(isQuery + 1) : string.Empty;
                string[] getSingleQuery = querySZ.Split('?');
                querySZ = getSingleQuery[0];

                NameValueCollection qs = null;
                qs = HttpUtility.ParseQueryString(querySZ);

                weburl = qs["qURL"];
                partName = qs["qSPart"];
                //call some great method thisPageRocks(weburl,partName); or whatever.
          }
      }
  }

Okay, Kritik ist willkommen (dies war ein nächtliches Gebräu, also können Sie gerne Änderungen anbringen). Wenn dies überhaupt geholfen, Daumen hoch, Happy Coding.

Es gibt keine Duplikate, jede Anfrage ist so einzigartig, wie Sie sie modifiziert haben, und aufgrund der Struktur des Systems ist es einfach, weitere Abfragen dynamisch innerhalb des Dom hinzuzufügen.