Question

我在页面上嵌套了记录，每个记录都有一个指向带有url参数的页面的URL。点击任何一条记录，我想在没有页面刷新的情况下获取警报中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
    });
});

Demo

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或锚点。即使使用了您的事件处理程序，click事件仍然可以使用它来处理将用户重定向到标记上指定的href属性的事件处理程序。

使用return false可以阻止事件继续执行其他处理程序的路径。

另一个类似的解决方案是在处理程序和prevent it's default behavior内实际处理事件本身。

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

这不会阻止事件的传播，但会尝试取消它if possible。

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

获取页面的url参数值而不刷新

4 个答案: