Как я могу добавить или обновить параметр строки запроса?

Question

С помощью javascript, как я могу добавить параметр строки запроса в URL, если он отсутствует, или, если он присутствует, обновить текущее значение? Я использую jquery для разработки на стороне клиента.

Answer 1

Да, у меня была проблема, из-за которой моя строка запроса переполнялась и дублировалась, но это было связано с моей собственной медлительностью. так что я немного поиграл и работал над js jquery (на самом деле sizzle) и магией C #.

Так что я только что понял, что после того, как сервер завершил передачу значений, значения больше не имеют значения, повторного использования не будет, если клиент хочет сделать то же самое, очевидно, это всегда будет новый запрос, даже если передаются те же параметры. И это все на стороне клиента, так что некоторые кеширование / куки и т. Д. Может быть круто в этом отношении.

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.
          }
      }
  }

Хорошо, критика приветствуется (это была ночная смесь, поэтому не стесняйтесь отмечать изменения). Если это вообще помогло, подождите, Happy Coding.

Никаких дубликатов, каждый запрос настолько уникален, насколько вы его изменили, и благодаря тому, как это структурировано, легко добавлять больше запросов динамически из домена.

Answer 2

На этой странице много неуклюжих и излишне сложных ответов.@ Amateur's с самым высоким рейтингом довольно хорош, хотя в RegExp есть немного ненужного пуха.Вот немного более оптимальное решение с чистым RegExp и чистым replace вызовом:

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
  ;
}

В качестве дополнительного бонуса, если uri не строка, вы не получите ошибок при попыткевызовите match или replace для чего-то, что может не реализовывать эти методы.

И если вы хотите обработать случай хэша (и вы уже сделали проверку для правильно отформатированного HTML), выможете использовать существующую функцию вместо написания новой функции, содержащей ту же логику:

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

Или вы можете внести некоторые небольшие изменения в отличный ответ @ Adam:

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 3

, если вы хотите установить несколько параметров одновременно:

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;
}

та же функция, что и у @ amateur's

, если jslint выдает ошибку, добавьте ее после цикла for

if(params.hasOwnProperty(key))

Answer 4

Вот альтернативный метод, использующий встроенные свойства привязанного HTML-элемента:

• Обрабатывает многозначные параметры.
• Нет риска изменения фрагмента # или чего-либо другого, кромесама строка запроса.
• Может быть немного легче читать?Но это дольше.

    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;
	};