如何在不刷新页面的情况下向我的URL添加参数？

Question

我有这个网址 http://localhost:1234/pag1

当我点击div时，我想要的效果如下:

 http://localhost:1234/pag1?fare=standar

我有一个onclick事件函数：

 <div id="" onclick="addUrl();"> </div>

以下是JavaScript代码：

<script type="text/javascript">
 function addUrl() {
    var url = window.location.href;
    window.location.hash = '?fare=standar';
};
    </script>

这给我带来了这个结果：

http://localhost:1234/pag1#?fare=standar

我不知道如何去掉 (#)。我只需要在URL中添加参数，而不刷新页面。

给我建议！谢谢。

- Esraa_92

---

点击 div 后，您是否希望使用新的 URL 重新加载页面？ - Dinesh Patra

点击 div 后，我想在实际 URL 中添加新参数，而无需重新加载页面。 - Esraa_92

然后您需要将URL存储在变量中。您不能在URL中显示它。 - Dinesh Patra

Answer 1

使用 window.history.pushState( {} , '', '?fare=standar' );

这将更新URL而无需刷新页面。

您还可以对pushState进行一些研究，因为其实现可能会有所不同。

- Ionut Milas

---

刚在 StackOverflow 页面上测试了那个方法，它可以正常工作。 在控制台中输入该方法并查看结果。 - Ionut Milas

请标记答案，如果它是正确的 :) 谢谢。 - Ionut Milas

是的，你的答案正确，谢谢你的帮助。 - Esraa_92

Answer 2

window.location.hash总是在url中放置“#”

您可以使用此函数将参数推入url中

function setGetParameter(paramName, paramValue)
{
    var url = window.location.href;
    if (url.indexOf(paramName + "=") >= 0)
    {
        var prefix = url.substring(0, url.indexOf(paramName));
        var suffix = url.substring(url.indexOf(paramName));
        suffix = suffix.substring(suffix.indexOf("=") + 1);
        suffix = (suffix.indexOf("&") >= 0) ? suffix.substring(suffix.indexOf("&")) : "";
        url = prefix + paramName + "=" + paramValue + suffix;
    }
    else
    {
    if (url.indexOf("?") < 0)
        url += "?" + paramName + "=" + paramValue;
    else
        url += "&" + paramName + "=" + paramValue;
    }
    window.location.href = url;
}

我希望这对你有所帮助。

- user3136856

---

谢谢你的回答，但是代码太长了，我在一行中找到了解决方案 ;-D - Esraa_92

Answer 3

尝试这个

HTML

<div onclick="addUrl()"> </div>

JavaScript

  <script type="text/javascript">
    function addUrl() {
    var url = window.history.pushState( {} , '', '?fare=standar' );
  </script>

简要说明：当用户点击div时，URL会更新而不刷新页面。

希望这对您有用， 谢谢 :-).

- user12085130

Answer 4

试试这个

var myURL = document.location;
document.location = myURL + "?a=parameter";

或者

location.hash = 'a=parameter'

或者不需要重新加载页面

window.history.pushState("object or string", "Title", "new url");

或者不需要重新加载页面

window.history.replaceState(null, null, "/another-new-url");

- Shameem Ahmed Mulla

---

我不想重新加载页面。 - Esraa_92

Answer 5

为什么不使用jQuery？我准备了一个示例，就像这里JsFiddle：

$("#clickableDiv").click(function(){
  var url = "http://localhost:1234/pag1";
  var parameter = "fare=standar";
  $("#AppendUrl").text(url+ "?" + parameter);  
});

- ercaguysal

---

谢谢您的回答，但是您将URL添加到了<p>中，我需要在不重新加载页面的情况下添加URL。 - Esraa_92

我不明白你的意思。你是指Ajax吗？类似这样的：https://dev59.com/lmMl5IYBdhLWcg3wVltf - ercaguysal