jQuery 将参数附加到 url答案

【问题标题】：jQuery append params to urljQuery 将参数附加到 url
【发布时间】：2015-04-22 04:06:53
【问题描述】：

我喜欢 jQuery 的 $.ajax() 方法允许指定请求 url 的方式：

{
  url: 'http://domain.com/?param=1',
  data{
    param2: '2'
  }
}

$.ajax() 方法将（可能）对提供的数据调用 $.param() 并可选择将其附加到提供的 URL。

我的问题是：这种类型的 url 操作在 $.ajax() 调用之外是否可用？

例如，我想打开一个弹出窗口，我想以与 $.ajax() 相同的方式构造 URL。

我已经编写了一个函数来执行此操作，但我感觉我正在重新发明轮子并复制已经存在的 jQuery 函数：

var prepareUrl = function( url, data )
{
  var params = $.param( data );

  if ( params.length > 0 )
  {
    // url contains a query string
    if ( url.indexOf( '?' ) > -1 )
    {
      // get last char of url
      var lastChar = url.substr( url.length - 1 );

      // Append & to the end of url if required
      if ( lastChar != '&' && lastChar != '?' )
      {
        url += '&';
      }
    }

    else // url doesn't contain a query string
    {
      url += '?';
    }

    url += params;
  }

  return url;
}

谢谢！

【问题讨论】：

标签： javascript jquery ajax url param

【解决方案1】：

由于其他回复没有回答我的问题，我对$.ajax() 调用进行了一些测试，看看它如何将 url 与参数数据合并。

到目前为止我的发现：

如果网址包含?，则$.ajax() 将附加'&' + $.param(data)
如果不是，那么$.ajax() 将追加'?' + $.param(data)

所以如果我想让我的 url 处理功能与$.ajax() 的方式保持一致，那么它应该类似于以下内容：

  var addParams = function( url, data )
  {
    if ( ! $.isEmptyObject(data) )
    {
      url += ( url.indexOf('?') >= 0 ? '&' : '?' ) + $.param(data);
    }

    return url;
  }

我仍然想知道是否有内置的 jQuery 方法可以做到这一点。

【讨论】：

【解决方案2】：

您可以像这样构建查询字符串：

getQueryStr = function(obj) {
    var str = [];
    for (var p in obj)
        if (obj.hasOwnProperty(p)) {
            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        }
    return str.join("&");
}

console.log(serialize({
    param1: "val1",
    param2: "val2"
}));

对于递归：

getQueryStr = function(obj, prefix) {
    var str = [];
    for (var p in obj) {
        if (obj.hasOwnProperty(p)) {
            var k = prefix ? prefix + "[" + p + "]" : p,
                v = obj[p];
            str.push(typeof v == "object" ?
                getQueryStr(v, k) :
                encodeURIComponent(k) + "=" + encodeURIComponent(v));
        }
    }
    return str.join("&");
}

console.log(serialize({
    favfruit: "apple",
    data: {
        name: 'js',
        points: [1, 2, 3]
    }
}));

【讨论】：

Uncaught ReferenceError: serialize is not defined - 看起来你仍在重新发明轮子，只是不同而已。
您的getQueryStr 方法与jQuerys $.param() 有何不同？我的问题是关于向已经包含查询字符串的现有 url 添加参数。 $.ajax() 方法处理得非常好。

【解决方案3】：

是的，您可以使用 jqueries .param() 函数来执行此操作。

jsfiddle demo

var params = { param1:"foo", param2:"bar"};
var str = jQuery.param( params );
alert(str);

【讨论】：

【解决方案4】：

param 方法将为您生成一个查询字符串，但您需要删除现有的查询字符串。

var base = "http://example.com/foo/?example=old";
var data = {
  foo: "hello",
  bar: "world?"
};
var url = base.replace(/\?.*$/, "") + "?" + jQuery.param(data);
alert(url);

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案5】：

正如this SO answer中所述，只需使用URLSearchParams

let urlParams = new URLSearchParams(location.search.substr(1));
urlParams.set(key, value);

其中key=value 是您要添加的新网址参数

您可以检查浏览器兼容性here

【讨论】：