使用 jQuery 构造带参数的 URL答案

【问题标题】：Constructing a URL with parameters using jQuery使用 jQuery 构造带参数的 URL
【发布时间】：2012-01-17 22:05:41
【问题描述】：

例如，我将以下 URL 存储在全局变量中：

var myUrl = "http://mydomain.com/something?row=1";

然后一个函数必须添加让我们说另一个名为“column”的参数。该函数如何使用 jQuery 向预先存在的 URL 字符串添加参数？

预期生成的字符串示例：

"http://mydomain.com/something?row=1&column=9"

问题是myUrl 也可能只是：

var myUrl = "http://mydomain.com/something";

（注意没有预先存在的参数）

【问题讨论】：

你需要它做什么？
有一个组件需要该 URL，并且有自己的方式使用 AJAX 获取数据。

标签： javascript jquery

【解决方案1】：

查看 jQuery 函数 .param()，它应该可以解决问题。

http://api.jquery.com/jQuery.param/

然后您可以创建一个函数，将 .param() 生成的字符串附加到 url。

【讨论】：

如果字符串已经有参数会怎样？还是字符串已经有同名参数？
在这种情况下，最好的办法可能是预先解析 URL，然后稍后使用 jQuery.param 或类似方法重新构建它。 “字符串是一个鲜明的数据结构......”

【解决方案2】：

var myUrl = "http://mydomain.com/something";

function addQSParm(name, value) {
    var re = new RegExp("([?&]" + name + "=)[^&]+", "");

    function add(sep) {
        myUrl += sep + name + "=" + encodeURIComponent(value);
    }

    function change() {
        myUrl = myUrl.replace(re, "$1" + encodeURIComponent(value));
    }
    if (myUrl.indexOf("?") === -1) {
        add("?");
    } else {
        if (re.test(myUrl)) {
            change();
        } else {
            add("&");
        }
    }
}

console.log(myUrl);

addQSParm("foo", "asdf");
console.log(myUrl);

addQSParm("bar", "qwerty");
console.log(myUrl);

addQSParm("foo", "123");
console.log(myUrl);

jsFiddle

【讨论】：

使用正则表达式 ([?&]" + name + "=)([^&]+)? 会更好。这可以在 URL 中查找空参数。

【解决方案3】：

你不需要 jQuery，使用这样的函数：

var buildUrl = function(base, key, value) {
    var sep = (base.indexOf('?') > -1) ? '&' : '?';
    return base + sep + key + '=' + value;
}

你会这样使用它：

buildUrl('http://www.example.com/foo', 'test', '123');
buildUrl('http://www.example.com/foo?bar=baz', 'test', '123');

【讨论】：

这并没有考虑到参数可能已经存在。当你按照示例中的方式调用它时会很明显，但是当所有参数都来自其他变量时，当你向 URL 添加参数时就不明显了。
缺少 URL 编码。

【解决方案4】：

将所有内容保留在一个对象中，直到您真正需要一个字符串。

首先从一些初始值填充对象：

var $_GET = location.search.substr(1).split("&").reduce( function( obj, val ){
    if( !val ) return obj;
    var pair = val.split("=");
    obj[pair[0]] = pair[1];
    return obj;
}, {} );

考虑初始url："http://mydomain.com/something?row=1&column=9"

$_GET['column'] = 5;

$.param( $_GET ); //"row=1&column=5"

Array#reduce

【讨论】：

【解决方案5】：

你可以试试这个。

myUrl += ((myUrl.indexOf('?') == -1) ? '?' : '&');
myUrl += "column=9";

【讨论】：

【解决方案6】：

if (myUrl.indexOf("?") != -1){
    // contains query string
}
else
{
    // doesn't
}

【讨论】：

这个问题是关于构造查询字符串，而不是读取它。
我认为你没有读过这个问题。这是关于检测查询字符串参数。