我应该使用什么 href URL 以使 AJAX 功能不会更改页面的 url？答案

【问题标题】：What href URL should I use so that AJAX function doesn't change url of page?我应该使用什么 href URL 以使 AJAX 功能不会更改页面的 url？
【发布时间】：2013-12-26 00:47:29
【问题描述】：

我正在构建一个网站，其中包含 Facebook 的“赞”按钮之类的功能，该按钮允许用户单击它并影响一些后端和可见的更改，而无需重新加载整个页面。我已经实现了 AJAX 调用，它们运行良好。

仅供参考，该网站是用 Django/Python 构建的，我正在使用 Dajaxice 包来帮助我做 AJAX 的事情（但这真的只是这个问题的附带问题）

这是我的 HTML 代码的样子：

<a id="myID" name="myID" href="#" onclick="Some_Fancy_AJAX_Stuff_Here;">Like</a>

我不喜欢这个页面位于http://www.mySite.com/index.html -- 但是当他们点击链接时，浏览器中的 URL 会发生变化。一个“#”被附加到它上面。我不喜欢那样。当我点击“喜欢”时，Facebook 上不会发生这种情况，那么我怎样才能在此处摆脱这种行为？

我尝试将 href="#" 替换为 href="."或 href=""，但这不起作用。我还尝试完全从标签中删除 href 属性。这样就成功了，但它具有删除下划线和链接着色以及鼠标悬停转向手的不良副作用。

那么最干净的方法是什么？

【问题讨论】：

标签： html ajax

【解决方案1】：

用return false; 结束花哨的 AJAX 内容，以防止默认操作跟随链接。

【讨论】：

【解决方案2】：

在单击处理程序中，您需要阻止默认操作。当您单击具有href 值为# 的锚点时，它会将浏览器重定向到内部标记。你只需要告诉主播什么都不做：

var anchor = document.querySelector("#myID");

anchor.addEventListener("click", function ( event ) {
    event.preventDefault();
    // Proceed to make asynchronous request
}, false);

【讨论】：

【解决方案3】：

我正在构建一个网站，其中包含 Facebook 的“赞”按钮等功能

您自己说的，使用button 而不是anchor。

所以

<button id="myID" name="myID" onclick="Some_Fancy_AJAX_Stuff_Here;">Like</button>

会是一种更清洁的方式。

最简洁的方法是通过 Javascript 添加事件侦听器。

【讨论】：