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

Question

使用以下代码：

<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 值将从服务中公开新数据。

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

Answer 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

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

Appending and replacing the query string value of a data-* attribute URL

javascript

jquery

json

query-string