标签: graceful-degradation

我目前正在为MooTools编写一个就地编辑脚本,我有点难以理解如何在没有JavaScript的情况下使其优雅地降级,同时还具有一些功能.我想以某种方式使用渐进增强.我不是在寻找代码,而是更多关于如何处理这种情况的概念.如果您有任何想法或知道任何优雅降级的编辑就地脚本,请分享.

我目前依赖锚标签在我的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关闭的用户,因为它会带来安全风险.

我试图遵循不引人注目的JavaScript /优雅降级的技术.我想在启用JavaScript时以及关闭JavaScript时使用不同的链接提供页面.

例如,当JavaScript关闭时,链接就是

<a href="script.cgi?a=action">

并且当JavaScript打开时

<a href="script.cgi?a=action;js=1">

(或类似的东西).

链接的两个版本(使用JavaScript和不使用JavaScript)都会导致服务器端脚本,但具有不同的参数.在JavaScript关闭时要调用的版本在服务器上执行的操作更多,因此在那里检测JavaScript是非生产性的(例如,从非JavaScript的服务器脚本重定向到另一个版本window.location).

注意:我更喜欢不使用jQuery等JavaScript库/框架的解决方案.

前几天我发现了一个启示.当尝试使用图像创建提交按钮时,我遇到了一个问题,其中图像没有显示但value文本是.当时,这不是我想要的,但现在,当我回顾过去时,我看到了一些潜在的用途.

如果您需要将数据发送到另一个页面,但没有一个需要用户输入,您可以通过链接(或表单)通过表单GET或通过表单来发送数据POST.问题是前者创建了丑陋的URL,而后者需要一个submit看起来不合适的按钮.当然,我可以想出一个图像,但是如果我只想要可选文本呢？

所以,我开始玩了一下,Firefox似乎呈现了我想要的内容,作为提交表单的可点击链接.您所要做的就是src从input type='image'标记中删除属性:

<form action='some_page' method='post'>
  <input type='hidden' name='email_address' value='test@test.com' />
  <input type='image' value='E-mail User' />
</form>

此解决方案是否适用于其他浏览器？这样做有什么缺点(除了你的链接CSS没有正确应用的明显事实)？