用javascript优雅降级锚标签

I currently rely on anchor tags to perform AJAX requests on my web application (using jQuery). For example:

我目前依赖锚标签在我的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>

However, these anchor tags pretty much become useless if the user disables javascript in their browser. What's the best way to handle graceful degradation of these anchor tags? Is my only option to switch them all to buttons inside form tags?

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

Edit: I should be more clear and specify that my AJAX call is an HTTP POST to a URL that I cannot, for security reasons, expose to normal HTTP GETs (e.g. think of a delete url "/items/delete/1"). With that in mind, I can't change the href of the anchor to be "/items/delete/1" in order to satisfy users with javascript turned off since it poses a security risk.

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

5 个解决方案

#1

One option (for which I'm sure I'll get downvoted), is to not bother with people who have javascript off. Display a message in a <noscript> tag informing the user that your site requires Javascript.

一个选项（我敢肯定我会被投票），是不打扰那些关闭javascript的人。在

It'll affect two groups of people: those who have knowingly disabled javascript and presumably know how to turn it back on, and those who are viewing your site on an older mobile device.

它会影响两组人：那些明知禁用javascript并且可能知道如何重新启用它的人，以及那些在较旧的移动设备上查看您网站的人。

Consider how important these groups of people are before you go on spending hours and hours developing for them.

在你花费数小时和数小时为他们开发之前，考虑一下这些人群的重要性。

#2

Simple, don't use the javascript: URI syntax as the href, at least, not in the HTML delivered to the client.

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

Deliver the HTML from the server with the href taking the user to whatever page you want to take them, and then replace the href (or capture the onclick event) for the anchor tag and do whatever you wish, being sure to prevent the default action for the event fire.

从服务器传递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>

And I fully agree with the suggestion to read Unobtrusive JavaScript.

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

#3

The answer I was looking for is buried in one of the comments:

我正在寻找的答案埋没在其中一条评论中：

your use of the <a> tag to do an HTTP POST operation is conflicting. <a> was designed for HTTP GET. You won't find a satisfactory answer here if you keep the semantics of your operation embedded in an <a> tag. See http://www.w3.org/2001/tag/doc/whenToUseGet.html

使用标签进行HTTP POST操作是有冲突的。是为HTTP GET设计的。如果将操作的语义保存在标记中，则无法在此处找到满意的答案。见http://www.w3.org/2001/tag/doc/whenToUseGet.html

#4

Read about Unobtrusive JavaScript to learn how to separate JS behavior from your actual markup. Anything else I post will just be a rehash of what someone else has said better elsewhere

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

#5

Your best bet for no-JS would probably be to have a form with a submit button, and point the form's action to your URL.

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

You can style the button to look like a link (or like anything else):

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

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

There's a good example of styling buttons in Particletree's article: Rediscovering the Button Element

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

#1