追加和替换 data-* 属性 URL 的查询字符串值答案

【问题标题】：Appending and replacing the query string value of a data-* attribute URL追加和替换 data-* 属性 URL 的查询字符串值
【发布时间】：2015-02-04 23:40:45
【问题描述】：

使用以下代码：

<select id="data-values">
    <option value="">Select an option</option>
    <option value="1234567890">Option 1</option>
    <option value="0987654321">Option 2</option>
</select>

我正在获取此选项元素的值，并将其作为查询字符串附加到元素中包含服务的数据属性（根据暂存或生产将是不同的 URL）的授权代码：

URL1

<div id="data-service" data-src="http://example.com/json_data/">Stylized service data here to be refreshed with new authorization code append</div>

我需要使用 jQuery 将一个新的查询字符串和值附加到这个 url，使它看起来像

URL2

<div id="data-service" data-src="http://example.com/json_data/?auth_code=1234567890">New stylized service data refreshed because of new auth code</div>

如果用户选择新选项值时auth_code已经存在，则需要将其替换为新值：

URL3

<div id="data-service" data-src="http://example.com/json_data/?auth_code=0987654321">New stylized service data refreshed because of new auth code</div>

更改此 auth_code 值将公开来自服务的新数据。

【问题讨论】：

标签： javascript jquery json query-string

【解决方案1】：

这样的事情会起作用：

Example Here

$('#data-values').on('change', function () {
    var url = "http://example.com/json_data/",
        value = this.value;

    if (value) {
        url += "?auth_code=" + value;
    }
    $('#data-service').attr('data-src', url);
});

..或者没有 jQuery：

Example Here

var select = document.querySelector('#data-values');
select.addEventListener('change', function () {
    var url = "http://example.com/json_data/",
        value = this.value;

    if (value) {
        url += "?auth_code=" + value;
    }
    document.querySelector('#data-service').dataset.src = url;
});

【讨论】：

以身份验证码查询字符串开头的概率为 50/50。此代码假定身份验证代码值已经存在，但它很可能不存在。另外，我为元素添加了一个 ID 以选择它们。
我想我还应该包括我们正在使用暂存和生产服务 URL，因此 URL 会根据您所在的位置而有所不同。所以我不知道我是否可以将 URL 硬编码到函数的变量中。
@micah 还是有点不清楚。您是说如果auth_code 已经存在，则需要替换它...但是如果auth_code 不存在 存在，什么都不应该发生？这就是你想要做的吗？
如果auth_code不存在，那么选择包含值的选项时，需要将该值附加到auth_code查询字符串，从而添加到URL的末尾就像在第二个 URL 示例中一样。我编辑了上面的原始文本以使其更清晰。
当我选择一个新选项时，您的 jQuery 示例的第 3 行似乎没有替换 data url 属性，但是当我这样做时，我看到该值从第 2 行附加到 URL控制台日志。 ://

【解决方案2】：

我会保存 URL 的原始值（因为它可能是由服务器端脚本生成的），然后在必要时附加查询字符串（注意转义值）：

jQuery(function($) {
    // take base url first
    var $service = $('#data-service'),
    baseServiceUrl = $service.data('src');

    $('#data-values').on('change', function() {
        var newUrl = baseServiceUrl;

        if (this.value.length) {
            newUrl += '?auth_code=' + encodeURIComponent(this.value);
        }
        $service
          .data('src', newUrl)
          .text(newUrl); // also change the element contents
    });
});

Demo

【讨论】：