javascript - 禁用 Javascript 时的 Ajax 回退

标签 javascript ajax jsf-2 progressive-enhancement graceful-degradation

问题:
i) 在 JSF2 应用程序中,我想创建一个带有选项卡控件的页面,当用户单击选项卡时,下面面板的内容通过 ajax 调用从服务器中的 xhtml 文件加载。
ii) 我希望它支持优雅降级(当禁用 Javascript 时),以便在单击选项卡时触发 HTTP 请求,并加载新页面......或者相反,通过渐进增强。

部分解决方案: i) 我想我可以通过 BalusC 在 How to ajax jsf 2 outputLink 中发布的代码示例来完成此操作
:-

<h:form>
<f:ajax render=":include">
    <h:commandLink value="Home" action="#{menuManager.setPage('home')}" /><br />
    <h:commandLink value="FAQ" action="#{menuManager.setPage('faq')}" /><br />
    <h:commandLink value="Contact" action="#{menuManager.setPage('contact')}" /><br />
</f:ajax>

</h:form>
<h:panelGroup id="include">
    <ui:include src="#{menuManager.page}.xhtml" />
</h:panelGroup>

问题
我如何扩展它来解决问题 (ii) 或者是否有其他完全不同的方法?我想也许我可以用 noscript 实现这个,但不知道如何实现!

编辑:可能的解决方案 - 尚未验证:
即使禁用了 ajax,上面的代码也应该可以工作;根据 http://www.laliluna.de/articles/posts/jsf-2-evaluation-test.html,它应该只通过 HTTP 工作:)
优雅的!我会试试的。

最佳答案

如果您使用 <h:commandButton>而不是 <h:commandLink> ,然后在禁用 JS 时它会正常工作。无论如何,命令链接都需要 JS 才能提交“隐藏​​”的 POST 表单,ajaxified 与否。如有必要,您可以添加一些 CSS 以使命令按钮看起来像链接(例如删除边框、背景、插图等)。

作为一个完全不同的替代方案,通过使用 <h:outputLink> 无论如何让它们 GET 请求或 <h:link>将页面作为请求参数或路径信息并使用 jQuery.load()而不是不引人注目地获取包含页面,提取相关部分并包含在 HTML DOM 树中。

关于javascript - 禁用 Javascript 时的 Ajax 回退,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8718152/

相关文章:

javascript - Backbone.js ModelBinder 将默认事件更改为 keyup

javascript - 在 Flask 模板中运行 Ember-Table

jquery - ajax失败后重新绑定(bind)当前函数?

javascript - 未捕获的语法错误 : Unexpected token }

jquery - 获取未捕获的语法错误: Unexpected Token ':'

jsf-2 - Jsf inputText onkeyup 事件处理程序

javascript - 将字符串转换为 Angular 8 中的枚举值

javascript - 如何在 JavaScript 中获取复合组件的子组件的客户端 ID

java - PrimeFaces 3.0 - 如何从支持 bean 以编程方式设置 TreeNode 图标?

javascript - js继承与instanceof