获取当前 URL 并更新 URL 中的参数

Posted

技术标签:

【中文标题】获取当前 URL 并更新 URL 中的参数【英文标题】:Get current URL and update parameters in URL 【发布时间】:2021-01-16 16:22:49 【问题描述】:

提前感谢您的宝贵时间。

我正在尝试从 URL 中获取值并自动填充单选选项。

示例网址 = https://example.com/v2-search/?&orderBy=relevance&tags=Kinship

<form action="https://example.com/v2-search/?" method="GET" >
    <div class="uk-inline">
        
        <div class="uk-inline">

           <label>Filter by: <label> 
           <input id="distance" class="uk-radio" type="radio" name="orderBy" value="distance"> Distance 
            <input id="relevance" class="uk-radio" type="radio" name="orderBy" value="relevance" > Relevance 

        </div>
        
        <div class="uk-inline">
        <button style="margin-left: 15px;" class="uk-button uk-button-primary uk-button-small uk-mobile-width">Update</button>
    </div>

    </div>

</form>

这是我在 cmets 中使用的 JS。

function autoFill() 
  var ob = url.searchParams.get("orderBy"); //Getting the value from the URL for the first radio options selected.
  var radioElements = document.getElementsByName("orderBy"); //Selecting the first radio options.

  for (var i=0; i<radioElements.length; i++) 
    if (radioElements[i].getAttribute('value') == 'ob') 
      radioElements[i].checked = true; //Adding checked to the value based on the URL
    
  
 

【问题讨论】:

【参考方案1】:

您可以将 URL 查询(搜索)字符串解析为 URLSearchParams 实例,这样可以更轻松地获取值。

然后您可以搜索相关的单选按钮并检查是否找到

const params = new URLSearchParams(location.search)
const orderBy = params.get("orderBy")

const radio = document.querySelector(`input[name="orderby"][value="$orderBy"]`)
if (radio) 
  radio.checked = true

【讨论】:

以上是关于获取当前 URL 并更新 URL 中的参数的主要内容,如果未能解决你的问题,请参考以下文章

如何从当前url获取参数

如何用js获取当前url的参数值

如何用js获取当前url的参数值

如何获取当前页面的url地址?

js获取url参数 如何改变当前页面内某个图片的地址?

如何使用js获取修改URL