进行ajax调用时如何正确处理链接上的href值？

Posted 2023-03-05

【中文标题】进行ajax调用时如何正确处理链接上的href值？

【英文标题】：How do I properly handle the href value on a link when making ajax calls?

【发布时间】：2012-05-09 20:45:49

【问题描述】：

为了快速说明，我页面上的所有链接目前都使用以下格式：

<a href="javascript:;" onclick="loadPageWithAjax();">Link</a>

我想做的是将代码升级到如下内容：

<a href="actual/path/to/content" onclick="loadPageWithAjax();">Link</a>

我的目标有两个：

使状态栏显示链接指向的 URL 允许用户复制链接位置并使其成为有效 URL

我的问题是这会忽略 onclick 并实际重定向到 URL。解决此问题的最佳方法是什么？

【参考方案1】：

在您的loadPageWithAjax() 函数中，您需要能够获取浏览器自动调用的事件数据。

function loadPageWithAjax(e)
    e.preventDefault(); stops page from clicking
    //do your ajax stuff

【参考方案2】：

你不能在不改变加载页面的情况下设置地址栏的 URL，除非你使用 window.location.hash 或新的 history.pushState 散列，这仅适用于 html5 浏览器。

【讨论】：

我实际上已经在使用 History API（通过 History.js）。但是，这只会在单击链接后替换 URL。您不能右键单击 > 复制 url 上的超链接，因为值为“;”来自href

【参考方案3】：

如果您使用 jQuery，那么我建议使用 History.js 或 jQuery BBQ。它们都为 HTML5 pushState 提供了良好的支持，并为 HTML4 浏览器提供了备用。使用 pushState，您将能够更新 URL（使其可添加书签），并且您可以使用 statechange 事件来处理导航（例如当用户点击后退按钮时）。查看 History.js 的文档，了解其工作原理的一些示例。

更新：

根据您的评论，我建议为您希望通过 AJAX 请求处理的链接创建一个事件处理程序。

例如，假设您想成为 ajaxy 的所有链接都有“ajaxify”类。

$(document).on("click", "a.ajaxify", function(e) 
    var url = $(this).attr("href");
    History.pushState(, null, url);

    // do something, like make an ajax request to get the url

    e.preventDefault();
);

【讨论】：

所以我实际上已经在使用 History.js。这是我正在谈论的链接的实际示例：<a href="javascript:;" onclick="javascript:History.pushState(null, null, '/user/<?=$username?>');"><?=$username?></a>

我在答案中添加了一个示例，可能会对您有所帮助。它不是使用 onclick，而是创建一个事件侦听器来处理 onclick 事件。这里的关键是使用 e.preventDefault() 来阻止浏览器像往常一样尝试加载 URL，这听起来像是您当前遇到的问题。

啊，呵呵。这比我目前实现它的方式非常简单和干净。非常感谢！