注意，当使用ASP。Net MVC，使用(Ajax.BeginForm(…，设置ajaxStart将不起作用。

使用AjaxOptions来解决这个问题:

(Ajax.BeginForm("ActionName", new AjaxOptions { OnBegin = "uiOfProccessingAjaxAction", OnComplete = "uiOfProccessingAjaxActionComplete" }))

至于实际加载的图像，请查看这个网站的一堆选项。

至于在请求开始时显示带有此图像的DIV，您有几个选择:

A)手动显示和隐藏图像:

$('#form').submit(function() {
    $('#wait').show();
    $.post('/whatever.php', function() {
        $('#wait').hide();
    });
    return false;
});

B)使用ajaxStart和ajaxComplete:

$('#wait').ajaxStart(function() {
    $(this).show();
}).ajaxComplete(function() {
    $(this).hide();
});

使用这个元素将显示/隐藏任何请求。可能是好也可能是坏，取决于需要。

C)对特定的请求使用单独的回调:

$('#form').submit(function() {
    $.ajax({
        url: '/whatever.php',
        beforeSend: function() { $('#wait').show(); },
        complete: function() { $('#wait').hide(); }
    });
    return false;
});

出于对其他文章的尊重，这里有一个非常简单的解决方案，使用CSS3和jQuery，不使用任何进一步的外部资源或文件。

$('#submit').click(function(){ $(this).addClass('button_loader').attr("value",""); window.setTimeout(function(){ $('#submit').removeClass('button_loader').attr("value","\u2713"); $('#submit').prop('disabled', true); }, 3000); }); #submit:focus{ outline:none; outline-offset: none; } .button { display: inline-block; padding: 6px 12px; margin: 20px 8px; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; background-image: none; border: 2px solid transparent; border-radius: 5px; color: #000; background-color: #b2b2b2; border-color: #969696; } .button_loader { background-color: transparent; border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid #969696; border-bottom: 4px solid #969696; width: 35px; height: 35px; -webkit-animation: spin 0.8s linear infinite; animation: spin 0.8s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 99% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 99% { transform: rotate(360deg); } } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="submit" class="button" type="submit" value="Submit" />

这将使按钮消失，然后“加载”的动画将出现在它们的位置，最后只显示成功消息。

$(function(){
    $('#submit').click(function(){
        $('#submit').hide();
        $("#form .buttons").append('<img src="assets/img/loading.gif" alt="Loading..." id="loading" />');
        $.post("sendmail.php",
                {emailFrom: nameVal, subject: subjectVal, message: messageVal},
                function(data){
                    jQuery("#form").slideUp("normal", function() {                 
                        $("#form").before('<h1>Success</h1><p>Your email was sent.</p>');
                    });
                }
        );
    });
});

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<button type="button" id="btn-submit" class="btn btn-info">Submit</button>

  <div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="loader" aria-hidden="true" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog" style="width:50px;padding-top: 15%;">
      <div class="modal-content text-center">
        <img src="https://i.gifer.com/ZZ5H.gif" />    
      </div>
    </div>
  </div>

jQuery

$(function() {
      $('#btn-submit').click(function() {
        $('#loadingModal').modal('show');
      });
    });

我还发现了这样一个问题(挑战)，在DB响应期间通知用户一些“信息”。

我的解决方案可能与这里的略有不同，它是好还是坏?我不知道，这对我来说已经足够了。

$.ajax({ 
    type: 'ajax',
    method: 'post',
    url: '<?php echo base_url()?>skargi/osluga_skarg',
    data: { full_date: full_date, head_title: head_title },
    //async: false,             
    dataType: 'json',
    beforeSend: function() { $body.addClass("loading"); },
    success: function(data) {   
        $body.removeClass("loading");