javascript - jQuery 在特定功能上加载 div 或仅在表单提交上加载

Question

我想在使用 jQuery 提交表单后实例化加载图像。

我找到了如何做到这一点并且它工作正常，但它始终适用于页面上完成的所有 jQuery 请求。

举个例子: How can I create a "Please Wait, Loading..." animation using jQuery?或者在这里 How to show loading spinner in jQuery?

有没有一种方法可以实现相同的效果，但只有在我提交表单时才能实现？

或者有什么方法可以将它附加到特定函数，以便它只在这些函数上运行“正在加载”图像？

我在页面上有这个函数(还有其他 jQuery 函数)，并且只想在这个函数上附加“正在加载”图像:

 <script>
function send_temp(form) {
  jQuery.post('editor.php?bar=<?php echo $id?>', jQuery(form).serialize(),function(data) {
  jQuery('#editor').html(data);
  });
}
</script>

当我提交表单时调用该函数。

感谢任何帮助或建议。

Answer 1

其他问题的答案显示了在执行 AJAX 时如何在页面范围内这样做。您只想在逐个表单的基础上进行。

要使用现有代码执行此操作，您可以使用jqXHR.always 方法为jQuery.post 返回的jQuery XHR 对象实现一个函数。 :

function send_temp(form) {
    // Show an element containing your spinner
    $('#loadingSpinner').fadeIn();

    // Submit the form, as you were before; attach 
    jQuery.post('editor.php?bar=<?php echo $id?>', jQuery(form).serialize(),function(data) {
        jQuery('#editor').html(data);
    }).always(function(){
        // Request complete, hide the element containing your spinner
        $('#loadingSpinner').fadeOut();
    });
}

jqXHR.always 处理程序的回调函数将在请求完成时被调用；不管成功还是失败。