使用 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（例如想想删除网址“/items/delete/1”）。考虑到这一点，我无法将锚点的 href 更改为“/items/delete/1”以满足关闭 JavaScript 的用户，因为它会带来安全风险。

Answer 1

我一直在寻找埋在评论一个答案：

  

您的<a>标签的使用做一个HTTP   POST操作是相互矛盾的。 <a>是   专为HTTP GET。你不会找到   一个满意的答案在这里，如果你继续   你操作的语义   嵌入在<a>标签。看到    http://www.w3.org/2001/tag/doc/whenToUseGet。 HTML

Answer 2

一个选项（我敢肯定，我会得到downvoted），是不是谁的JavaScript富裕的人打扰。显示在一个标签<noscript>一个消息，通知站点需要的Javascript用户。

这会影响到两群人：那些谁明知禁用了JavaScript，想必知道如何打开它，和那些谁是旧的移动设备上查看自己的网站

考虑这些群体的人是多么的重要，你去花费几个小时为他们开发了。

Answer 3

很简单，不要使用 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 4

阅读非侵入式JavaScript ，了解如何JS行为从您的实际标记分开。别的我会后刚刚出现什么别人说其它地方更好的翻版

Answer 5

对于没有JS您最好的选择可能是有一个提交按钮形式，并指出窗体的行动您的网址。

您可以风格的按钮，看起来像一个链接（或其他任何事情一样）：

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

有造型按钮在Particletree的文章一个很好的例子：重新发现按钮元件