将请求的 JSON 供稿显示为 URL

Question

我有一个表单可以请求 JSON 提要并显示结果。我还需要能够向用户提供原始提要 link。我有以下代码从输入中提取选择并为请求生成 URL：

document.getElementById('region').addEventListener('submit', function (event) {
  event.preventDefault();

      window.location.href = '/editorialPortal' + '?' + this.id + '=' + this.options[this.selectedIndex].value;

});

我需要能够将 window.location.href = '/editorialPortal' + '?' + this.id + '=' + this.options[this.selectedIndex].value; 放入锚点 link，但无法进行该设置。

我有这个 <a href="<' + "script type='text/javascript'>window.location.href = '/editorialPortal' + '?' + this.id + '=' + this.options[this.selectedIndex].value;"'</script>">JSON</a> ，但由于引号的位置，它不能正常工作。

您会在 console.log 事件中看到 URL 是由此 fiddle 中的表单生成的 我需要能够设置生成的 URL作为 JSON 喂它 returns

Answer 1

假设您要更新的<a>已经存在，已经有'JSON'的文本，并且有link的id（如果不存在， 向您展示如何向页面添加新的 <a>）。所以我们只需要用选定的值更新它的 href 属性。

var regionBox = document.getElementById('region'),
    region = regionBox.options[regionBox.selectedIndex].value,
    durationBox = document.getElementById('duration'),
    duration = durationBox.options[durationBox.selectedIndex].value,
    link = document.getElementById('link'),
    newHref = '/editoralPortal/?region=' + region + '&duration=' + duration;

link.href = newHref;

Answer 2

您需要在 DOM

上动态创建锚标记

// create anchor and set attributes

var anchor = document.createElement('a');
anchor.setAttribute('href', 'your generated link goes here');
anchor.innerHTML = 'Whatever you want to show up on page';

// nest anchor tag somewhere on page

var blabla = document.getElementById('blabla);
blabla.appendChild(anchor);

希望对您有所帮助！