使用 javascript 优雅地降级锚标记

Question

我目前依靠锚标记在我的 Web 应用程序上执行 AJAX 请求（使用 jQuery）。 例如：

<script type="text/javascript">
    $(document).ready(function() {
        $("#test").click(function() {
            // Perform AJAX call and manipulate the DOM
        });
    });

    <a id="test" href="">Click me!</a>
</script>

但是，如果用户在浏览器中禁用 JavaScript，这些锚标记几乎变得毫无用处。 处理这些锚标签的优雅降级的最佳方法是什么？ 我唯一的选择是将它们全部切换到表单标签内的按钮吗？

编辑：我应该更清楚地指出，我的 AJAX 调用是对 URL 的 HTTP POST，出于安全原因，我无法将其公开给正常的 HTTP GET（例如，考虑删除 url“/items/delete/1”）。 考虑到这一点，我无法将锚点的 href 更改为“/items/delete/1”以满足关闭 JavaScript 的用户，因为它会带来安全风险。

Answer 1

一种选择（我确信我会被否决）是不要打扰那些关闭了 javascript 的人。 在 标记中显示一条消息，通知用户您的网站需要 Javascript。

它将影响两类人：那些故意禁用了 JavaScript 并且可能知道如何重新打开它的人，以及那些在旧移动设备上查看您的网站的人。

在您继续花费大量时间为他们进行开发之前，请考虑一下这些人群的重要性。

Answer 2

很简单，不要使用 javascript: URI 语法作为 href，至少不要在传递给客户端的 HTML 中使用。

从服务器传递 HTML，并使用 href 将用户带到您想要访问的任何页面，然后替换锚标记的 href（或捕获 onclick 事件）并执行您想要的任何操作，确保防止默认操作为事件起火。

<script type="text/javascript">
    $(document).ready(function() {
        $("#test").click(function(e) {
            // Perform AJAX call and manipulate the DOM
            e.preventDefault();
        });
    });

    <a id="test" href="/Proper/URI">Click me!</a>
</script>

我完全同意阅读 Unobtrusive JavaScript 的建议。

Answer 3

我一直在寻找的答案隐藏在其中一条评论中：

您使用 标记来执行 HTTP
POST 操作有冲突。 是
专为 HTTP GET 设计。 你不会发现
如果你坚持的话，这里会有一个满意的答案
你的操作的语义
嵌入 标记中。 看
http://www.w3.org/2001/tag/doc/whenToUseGet。 html

Answer 4

阅读Unobtrusive JavaScript，了解如何将 JS 行为与实际标记分开。 我发布的任何其他内容都只是别人在其他地方说过的更好内容的重述

Answer 5

对于 no-JS，最好的选择可能是拥有一个带有提交按钮的表单，并将表单的操作指向您的 URL。

您可以将按钮设置为看起来像链接（或其他任何内容）：

<button class="linkstyle" type="submit">Foo</button>
<style type="text/css">
button.linkstyle { border:none; background:none; padding:0; }
<style>

Particletree 的文章中有一个很好的按钮样式示例：重新发现按钮元素