让jQuery AJAX有一个非javascript(非ajax)回退?

我已经在我的最新项目上完成了相当多的工作,但我意识到有一个问题:如果你没有支持Javascript的浏览器,你就不能提交任何表格,因为每个表格都使用AJAX提交它。

我向大家提出的问题是:我如何实现某种“后备”,这样如果他们没有启用Javascript,他们仍然可以提交表单。

目前,我的标题中有一条横幅,上面写着“为了获得最佳(并且通过”最佳,“我们的意思是”实际工作“)体验,请在浏览器中启用Javascript。” 但这似乎不是最佳解决方案。

谢谢!

对于表单,您需要为包含输入的表单标记提供方法和操作属性。 然后实际通过提交按钮将其提交到那里。 一旦有效,然后用你的jquery覆盖它。 瞧瞧。

这是关于渐进式网页的重要事情,您可以开发无需javascript工作的网页。 解决任何问题的一种实用方法是弄清楚如果你从未使用JS,你需要做什么。

许多开发商不相信你甚至应该有一个后备……但它似乎是一个热门的意识形态辩论。

当然。 很明显,后端有一些东西可以处理通过AJAX发送的数据。 设置表单以便将数据(通常通过POST)发送到同一个地方不应该是一个巨大的麻烦。 您的表单看起来像:

然后没有javascript的用户通过直接HTTP请求提交表单,而具有javascript的用户则通过jQuery拦截该操作。

首先编写HTML(这是你的后备),并确保使用表单提交,然后在顶部添加jQuery,这样,如果您的用户没有启用javascript,表单仍然可以工作。

HTML

 

JS

 $('form').submit(function(e){ var form=$(this); var form_url=form.attr('action'); $.ajax({ url: form_url, success: function(data){} }); }); 

如果启用了javascript,它将通过ajax提交,否则将正常提交。

我最喜欢的一个插件是jQuery Form Plugin 。 这允许极其简单的优雅降级。 只需设置表单,就像编写非JavaScript网站一样。 (设置您的服务器以支持它。)然后,使用表单插件覆盖默认行为,而无需重复代码或逻辑来设置它。 如果启用了JavaScript,则会获得AJAXfunction,否则默认function仍然存在:

 
 document.search.responseFormat.value = "json"; $(document.search).ajaxForm({ dataType: "json", success: function (data, status, xhr) { ... }, error: function (xhr, status, message) { ... } }); 

要提交的url,方法和值都是由HTML中的表单插件自动检索的。 服务器知道只返回JSON而不是完整的HTML页面,因为您使用JavaScript将responseFormat隐藏字段值修改为json

最简单的方法是在表单中有一个提交按钮,然后在按下按钮时触发Javascript。 如果未启用Javascript,则只会定期提交。 如果是,它将运行Javascript。

我喜欢使用iframe,而不是将非javascript用户发送到我的主题文件的深处。 这样他们就可以留在他们所在的页面上。 您只需将“target”属性添加到表单中即可。 您还可以通过向JS中传递的数据添加另一个参数来轻松区分您是否正在使用AJAX …

 var data = form.serialize()+'&ajax=true'; $.ajax({ type: 'POST', url: 'email.php', data: data, success: function(response){ alert(response); } });