提交带有$ .ajax的表单是否自相矛盾？

Question

我目前正在研究一个MVC应用程序，我使用了很多jQuery和html表单。 然而，最近我注意到这些似乎在某种程度上相互矛盾......

例如，我必须阻止表单默认提交来处理我的AJAX调用，否则服务器被调用两次，这导致我质疑使用AJAX提交表单的想法。 将$.ajax调用挂钩到<input type="button" />不是<input type="submit" />不是更好吗？

那么，拥有一个通过ajax提交的表单是否自相矛盾？

Answer 1

您将ajax调用放在提交按钮上的原因是，如果用户禁用了javascript，则会出现自然回退。 你应该让你的后端逻辑检测请求是ajax请求还是直接提交，并且如果它是ajax则能够发回数据，或者如果没有，则处理请求'old school'。

编辑：对于上下文。

<form action="/processForm.php" method="POST">
   <input type="submit" value="submit" />
</form>

然后你的jQuery看起来像这样

$('form').bind('submit', function(e){
    e.preventDefault();
    //do your stuff
});

如果用户已禁用javascript，则表单将像正常一样提交到/processForm.php。

您可以使用以下php检测表单是否通过ajax发送（我不知道您使用的是什么，但这是我所拥有的）。

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
  /* handle ajax here */
}else{
  /* handle normal submit here */
}

Answer 2

我不会说这是“矛盾的”。 当通过ajax提交表单时，当然没有必要使用<form>元素，但是您仍然可能希望将其用于语义目的。

是的，我只是使用<input type="button" />而不是type="submit"因为你想要的方式必须阻止默认的表单提交。

Answer 3

我不这么认为。

当用户没有启用javascript时，您可以将其作为后备，以便将表单提交给服务器，用户仍然可以使用您的网页。

为此，如果是ajax调用，你的后端需要知道。 我看到你正在使用jQuery，jQuery ajax发送标头x_request_with: xmlhttprequest ，如果你在后端使用PHP，你可以在$_SERVER['http_x_request_with']捕获它。

Answer 4

这取决于你想做什么。 一般来说，我尝试使用然后使用$ .ajax（）处理调用...但有时候不能使用asp.net mvc。 例如，如果您正在上传文件，那么asp.net验证会扼杀。 为了解决这个问题，请使用ajaxForm插件并使用它来包装标准表单。