用 $.ajax 提交表单是不是矛盾？

Posted 2023-03-05

【中文标题】用 $.ajax 提交表单是不是矛盾？

【英文标题】：Is it contradictory to submit a form with $.ajax?用 $.ajax 提交表单是否矛盾？

【发布时间】：2012-01-14 04:54:22

【问题描述】：

我目前正在开发一个使用大量 jQuery 和 html 表单的 MVC 应用程序。但是，最近我注意到这些似乎有些矛盾......

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

那么，有一个通过ajax提交的表单是矛盾的吗？

【问题讨论】：

“矛盾”是什么意思？你觉得矛盾的是什么？

我觉得通过提交流程和ajax流程提交表单是相互矛盾的，因为默认提交总是优先，除非您在进行ajax调用之前阻止默认。

如果您的客户端支持 AJAX，是否需要强制他们往返服务器以获取整个新页面以显示感谢消息或检查某些内容的状态？我自己会使用 AJAX 提交数据并根据我的使用情况取回 HTML 或 JSON。除非您在表单提交上阻止默认设置，否则您将收到重复提交。这个想法是编写代码，使其优雅地降级。您可能会绑定到表单提交，检查是否启用了 AJAX，如果它是 preventDefault 然后执行您的 AJAX。

【参考方案1】：

您将 ajax 调用放在提交按钮上的原因是，如果用户禁用了 javascript，就会有自然的回退。您应该让后端逻辑检测请求是 ajax 请求还是直接提交，如果是 ajax 则能够将数据发回，否则以“老派”方式处理请求。

编辑：针对上下文。

<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 */

【讨论】：

我将如何将其实现为自然后备，目前我必须阻止该操作，以便 ajax 优先，这意味着没有后备。可以举个例子吗？

如果用户没有启用 JavaScript，那么阻止标准表单提交的 JS 不会触发。所以你真的不需要做任何事情。

检测是否启用了 AJAX：$.support.ajax 和一个完整的例子是 $('#categoryFilter').submit(function(event) if($.support.ajax) event.preventDefault(); /* 把我的 AJAX 放在这里 */ );

【参考方案2】：

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

是的，我只使用<input type="button" /> 而不是type="submit"，因为这样您就必须阻止默认表单提交。

【参考方案3】：

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

【参考方案4】：

我不这么认为。

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

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