jQuery在传输期间显示Ajax加载器＆amp;防止多次提交

Question

我有一个应用程序，它有几种不同类型的表单元素，都使用jQuery AJAX将数据发布到服务器。

我想做的是：

1. 在AJAX传输期间显示加载程序
2. 阻止用户提交两次+ （点击很多）

对于网站上的每种类型的表单（评论，文件上传等），这很容易一次性完成。但我很想知道这是否是一种更全面的方式来解决这个问题？

可以说聪明的东西：

1. 如果表单正在提交给服务器并等待响应，请忽略所有提交
2. 在提交/点击的项目
上显示DISABLED课程
3. 在class="spinner"上显示最接近所提交项目的
的加载类 你怎么看？好主意？做完之前？

Answer 1

查看jQuery Global Ajax Event Handlers。

简而言之，您可以设置每个 AJAX请求中发生的事件，因此名称为全局事件处理程序。有几个不同的事件，我将在下面的代码示例中使用ajaxStart()和ajaxComplete()。

我们的想法是我们展示加载，禁用表格＆amp; ajaxStart()事件上的按钮，然后重新启用表单并隐藏ajaxComplete()事件中的加载元素。

var $form = $("form");
$form.ajaxStart(function() {

    // show loading
    $("#loading", this).show();

    // Add class of disabled to form element
    $(this).addClass("disabled");

    // Disable button
    $("input[type=submit]", this).attr("disabled", true);
});

AJAX完成事件

$form.ajaxComplete(function() {

    // hide loading
    $("#loading", this).hide();

    // Remove disabled class
    $(this).removeClass("disabled");

    // Re-enable button
    $("input[type=submit]", this).removeAttr("disabled");
});

如果AJAX调用失败，您可能需要附加到ajaxError事件，因为您可能需要清理一些元素。测试一下，看看失败的AJAX请求会发生什么。

PS 如果您正在拨打$.ajax或类似内容（$.getJSON），您仍然可以通过$.ajaxStart和$.ajaxComplete设置这些活动AJAX没有附加到任何元素。您需要稍微重新安排代码，因为您无法访问$(this)。

Answer 2

我相信您必须确保2和3以提高应用的可用性。最好保持后端愚蠢但如果你有安全问题，你也应该处理它。