4

我的最新项目已经完成了相当多的工作，但我意识到有一个问题：如果您没有支持 Javascript 的浏览器，则无法提交任何表单，因为每个表单都使用AJAX 提交它。

我对你们所有人的问题：我怎样才能实现某种“回退”，以便如果他们没有启用 Javascript，他们仍然可以提交表单。

目前，我在标题旁边有一个横幅，上面写着“为了获得最佳（以及“最佳”，我们的意思是“实际工作”）体验，请在您的浏览器中启用 Javascript。但这似乎不是最佳解决方案。

谢谢！

4

7 回答 7

5

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

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

那里的许多开发人员都不相信您甚至应该有一个后备方案……这似乎是一场激烈的意识形态辩论。

于 2012-03-29T23:12:25.747 回答
1

当然。显然，您在后端有一些东西可以处理通过 AJAX 发送的数据。设置表单以便它们将数据（通常通过 POST）发送到同一个地方应该不是什么大麻烦。你的表格看起来像：

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

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

于 2012-03-29T23:13:24.103 回答
1

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

于 2012-03-29T23:14:48.687 回答
1

我最喜欢的插件之一是jQuery Form Plugin。这允许优雅简单的优雅降级。只需像编写非 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) {
        ...
    }
});

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

于 2012-03-29T23:19:36.933 回答
1

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提交，否则正常。

于 2012-03-29T23:20:15.157 回答
0

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

于 2012-03-29T23:12:02.190 回答
0

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

var data = form.serialize()+'&ajax=true';
$.ajax({
  type: 'POST',
  url: 'email.php',
  data: data,
  success: function(response){
  alert(response);
  }
});
于 2012-08-20T07:35:11.993 回答