使jQueryAJAX具有非javascript(非AJAX)回退



我在最近的项目上做了很多工作,但我意识到有一个问题:如果你没有启用Javascript的浏览器,你就不能提交任何表单,因为每个表单都使用AJAX来提交。

我向大家提出的问题是:我如何实现某种"回退",以便如果他们没有启用Javascript,他们仍然可以提交表单。

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

谢谢!

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

这是渐进式web的重要之处,您可以开发不使用javascript的页面。解决任何问题的一个实用方法是弄清楚如果你一开始就没有使用JS,你需要做什么。

许多开发人员甚至不认为你应该有一个后备方案。。。这似乎是一场激烈的意识形态辩论。

当然。很明显,您在后端处理通过AJAX发送的数据。设置表单使其将数据(通常通过POST)发送到同一个位置应该不会太麻烦。你的表格看起来像:

<form action="yourscript" method="POST">
    <input ... />
</form>

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

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

HTML

<form action="yourscript" method="POST">
    <input ... />
</form>

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插件。这允许优雅的简单优雅的降级。只需将表单设置为编写非JavaScript网站即可。(设置你的服务器以支持它。)然后,使用表单插件来覆盖默认行为,而不需要重复代码或逻辑来设置它。如果启用了JavaScript,您将获得AJAX功能,否则默认功能将保留:

<form name="search" action="/search/" method="GET">
    <input name="responseFormat" value="fullHTML" />
    <input name="q" />
    <input type="submit" value="Search" />
</form>
document.search.responseFormat.value = "json";
$(document.search).ajaxForm({
    dataType: "json",
    success: function (data, status, xhr) {
        ...
    },
    error: function (xhr, status, message) {
        ...
    }
});

表单插件会自动从HTML中检索要提交的url、方法和值。服务器知道只返回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);
  }
});

相关内容

  • 没有找到相关文章

最新更新