代码之家 › 专栏 › 技术社区 › Kevin Pang

javascript对锚点标签的优雅降级

graceful-degradation html jquery javascript

1

Kevin Pang · 技术社区 · 17 年前

我目前依靠锚点标签在我的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(例如,考虑一个delete URL“/items/delete/1”)。考虑到这一点,我不能将锚点的href更改为“/items/delete/1”,以便在关闭javascript的情况下满足用户的需求,因为这会带来安全风险。

5 回复 | 直到 17 年前

1

6

nickf 17 年前

一个选择(我确信我会被否决)是不要打扰那些关闭javascript的人 <noscript> 标签通知用户您的网站需要Javascript。

它将影响两类人:一类是故意禁用javascript并可能知道如何重新打开它的人,另一类是在旧移动设备上查看您的网站的人。

在你继续花几个小时为他们发展之前,想想这些群体有多重要。

2

3

foxxtrot 17 年前

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

使用href从服务器传递HTML,将用户带到您想要带到的任何页面,然后替换锚标记的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>

我完全同意阅读非侵入式JavaScript的建议。

3

Kevin Pang 17 年前

我一直在寻找的答案埋在其中一条评论中:

您对 <a> 标记以执行HTTP POST操作冲突。 <a> 是专为HTTP GET而设计。你找不到如果你坚持,这里会有一个满意的答案操作的语义嵌入a <a> 标签。看见 http://www.w3.org/2001/tag/doc/whenToUseGet.html

4

1

Kevin 17 年前

阅读关于 Unobtrusive JavaScript 学习如何将JS行为与实际标记分离。我发布的任何其他内容都只是别人在其他地方说得更好的重复

5

1

orip 17 年前

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

您可以将按钮设置为链接样式(或其他任何样式):

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

Particletree的文章中有一个很好的按钮样式示例: Rediscovering the Button Element