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处理程序的回调函数；不管成功与否。