无需刷新即可获取页面的url参数值

Question

我在页面上嵌套了记录，每个记录都有一个指向带有url参数的页面的url。 任何记录的onclick，我都希望在不刷新页面的情况下获得警报中url参数的值

<script>
$(document).ready(function() {
    $('.click').on('click', function(event) {
        var url = window.location.search.substring(1);
        alert(url)
    });
});
</script>

的HTML

<a class="click" href="#?news_id=89">NEWS1</a> </p>
    <p><a class="click" href="#?news_id=90">NEWS 2</a>

Answer 1

查看代码中的内联注释：

您可以使用return false或event.preventDefault()来停止页面重定向。

$(document).ready(function () {
    $('.click').on('click', function (event) {
        var href = $(this).attr('href'); // Get the `href` value of the clicked anchor
        var paramValue = href.split('=')[1]; // Get the value after =
        alert(paramValue);

        return false; // Stop redirection
    });
});

演示版

Answer 2

在函数末尾返回false以防止页面刷新

 $('.click').on('click', function(event) { var url = $(this).attr('href').match(/[0-9]+$/)[0]; alert(url); return false; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a class="click" href="#?news_id=89">NEWS 1</a> <a class="click" href="#?news_id=90">NEWS 2</a> 

Answer 3

其他人提供了解决方案，因此我将尝试解释为什么在事件处理程序中return false可以解决问题。

您的问题是单击<a>标记的实际操作。 单击锚标记将您重定向到该页面的URL或锚。 即使使用事件处理程序，单击事件也将使事件处理程序进入将用户重定向到标签上指定的href属性的事件处理程序。

使用return false可以防止事件继续在其他处理程序的路径上进行。

---

另一个类似的解决方案是在处理程序内部实际处理事件本身，并防止其为默认行为 。

$('.click').on('click', function (event) {
    ...
    event.preventDefault();  
)};

这不会阻止事件的传播，但它会尝试取消它，如果可能的 。

Answer 4

尝试split() ：

var url = window.location.search.split('=').pop(); //works if its the only 1 parameter.

或match() ：

var url = window.location.search.match(/news_id=(\d*)/)[1]; // works even with mutilple parameters

如其他人所建议，使用return false以避免页面刷新。

$('.click').on('click', function(event) {
   // 
   return false;
});