如何避免在锚点（<a></a>）标签点击时刷新页面？答案

【问题标题】：How to avoid page refreshing on anchor (<a></a>) tag click?如何避免在锚点（<a></a>）标签点击时刷新页面？
【发布时间】：2014-01-26 05:06:35
【问题描述】：

我正在创建一个动态网站。我的问题是当我点击以下标签时：

<a class="s-inte" href="set_interesantes.php?n=Frank Melo&u=f6e79cfe9c0ecc4c08dac4c860c4802b&back=http://localhost:8085/Something/success/profile.php?search_user=f6e79cfe9c0ecc4c08dac4c860c4802b&p=12&sa=f6e79cfe9c0ecc4c08dac4c860c4802b&i=2345123&dl=&iv=1">Interesante</a>

页面被刷新，如何避免页面刷新？

【问题讨论】：

您希望链接在不同的浏览器实例中打开页面吗？我不明白你在问什么。
我希望标签扮演 facebook 的角色。示例：当您点击 facebook 锚点“赞”时，页面不会刷新。
如果您不希望它作为页面加载，为什么要在 href 开头有一个 URI？
好吧，我对此有点小题大做，href '' 标记内的文件通过 $_GET 获取参数以计算兴趣（兴趣）并保存到一个表格中，该表格播放“喜欢”的角色。
您可能希望将该信息放在其他地方，而不是在 href 本身中。当您使用 jQuery 时，我建议将其存储在 HTML5 data-* 属性中（此时您可以将 javascript:; 放入 href 以防止浏览器加载全新的页面。

标签： javascript php jquery html

【解决方案1】：

如果您使用 ajax 动态加载内容。您可能应该以这种方式调用它。这样，无论是动态添加还是静态添加，它都适用于具有 .s-inte 类的每个锚点。

$(document).on('click', '.s-inte',function(e){
    e.preventDefault();

    // Do more stuff every anchor click here...
});

【讨论】：

【解决方案2】：

您想要完成的是在不刷新页面的情况下更新一些有趣的计数器？您应该使用 AJAX 技术来实现，这就是 AJAX 的发明目的。

考虑以下代码，它非常简单（需要 jQuery 库）：

<a href="#" class="counter">Interesante</a>

<script>
$(function(){
    $("a.counter").click(function()
    {
         $.get("set_interesantes.php?n=Frank Melo&u=f6e79cfe9c0ecc4c08dac4c860c4802b&back=http://localhost:8085/Something/success/profile.php?search_user=f6e79cfe9c0ecc4c08dac4c860c4802b&p=12&sa=f6e79cfe9c0ecc4c08dac4c860c4802b&i=2345123&dl=&iv=1" );
         .... // you can do some animation here, like a "Liked!" popup or something
         return false; // prevent default browser refresh on "#" link
    });
});
</script>

【讨论】：

很高兴听到！如果你有兴趣学习 AJAX，从 GET 方法开始，从这个页面：api.jquery.com/jquery.get 如果你想从 AJAX PHP 脚本得到任何响应，也很容易，例如：$.get("test.php", function(data){alert(data);});

【解决方案3】：

您需要阻止点击事件的默认操作。

你可以做一个简单的内联处理程序，它会返回 false

<a class="s-inte" onclick="return false" href="set_interesantes.php?n=Frank Melo&u=f6e79cfe9c0ecc4c08dac4c860c4802b&back=http://localhost:8085/Something/success/profile.php?search_user=f6e79cfe9c0ecc4c08dac4c860c4802b&p=12&sa=f6e79cfe9c0ecc4c08dac4c860c4802b&i=2345123&dl=&iv=1">Interesante</a>

或者编写一个 jQuery 处理程序来做同样的事情

$('.s-inte').click(function(e){
    e.preventDefault()
})

【讨论】：

前段时间试过了，似乎在 Chrome 中不起作用。
@user3236821 - 应该。如果没有，那么很可能你做错了什么......
对我不起作用，实际上使我的锚链接无效