如果js可用，请使用ajax而不是html表单

Question

我必须设置大量的html表单，将数据发送到php后端。我会开始构建html表单“老式的方式”发送提交的帖子数据。作为“sur plus”，我会在jquery上设置ajax请求（如果用户启用了js）。

我的步骤：

1. 检查js是否可用，如果没有，请保留html表单提交
2. 使用prevent.default停止表单提交
3. 通过ajax请求发送数据

这似乎是一项额外的工作。是否有一种技巧或“最佳实践”让生活变得更轻松？

Answer 1

嗯，诀窍很简单：

$(function() {
  ...
  $('form').someAjaxSubmit({...my options..});
  ...
});

其中ajaxSubmit是jQuery插件的one或another版本。当然，您需要考虑输出的位置等。

如果你没有JS，上面的代码显然不会执行，表单将以“旧方式”工作。您可以调整插件以从表单属性获取所有内容，并且不需要更改代码 - 除非您的Web应用程序数据流逻辑由于某种原因阻止它。通常会出现问题，因为表单提交结果格式以及如何处理它;但即使是完整的html页面也可以被解析并且它的主体设置而不是当前的主体 - 但我认为它是一个淤泥。最好只更改表单提交成功时DOM所需的内容。

如果可以调整服务器，那么构建响应的更好方法是检查X-Requested-With: XMLHttpRequest标头，并仅将内容块更新发送为html片段甚至是JSON。

Answer 2

1. 检查js是否可用=＆gt;将表单包装在标签中。只有在JS不工作时才会显示。

2. 要停止表单提交并发送数据，如果使用Jquery，则非常简单。停止你只需添加：

   $("form").submit(function (e) { e.preventDefault(); ...
   

对于提交，你在jquery中有一个广泛且易于使用的API：load function，ajax function等。看看他们的文档或示例。

我不认为你应该在这里使用插件或库，因为它非常简单。只有当你应该编写一些主题（如验证）时才应该使用插件和库，但为此 - 我认为你应该单独编写它。它还将提升自己作为一名程序员。