所有ajax调用完成后如何刷新页面？

Question

下面是我的 jquery 函数。我需要刷新页面，以便在他们检查要显示的列之后显示其他列。当前使用代码 (location.reload())，它会在 ajax 调用完成之前刷新。我在复选框循环之后尝试了 .promise，但它只允许我提交 1 个复选框。

jQuery

$('.delete-numbers').click(function () {
        $('.number-chkbox').each(function () {   
            if (this.checked) {
                $(this).attr('checked', true);
                alert($(this).val() + " " + this.checked + "I GOT INNNN ADDDDD");
                $.ajax({
                    url: '/PhoneBook/AddNumber',
                    data: {
                        Number: $(this).val(),
                        Name: name,
                        PhoneId: PhoneId
                    },
                    type: "POST",
                    dataType: "html",
                    cache: false
                });
            } else {
                $(this).removeAttr('checked');
                alert($(this).val() + " " + this.checked + "I GOT INNNN REMOVE");
                $.ajax({
                    url: '/PhoneBook/AddNumber',
                    data: {
                        Number: $(this).val(),
                        Name: name,
                        PhoneId: PhoneId
                    },
                    type: "POST",
                    dataType: "html",
                    cache: false
                });
            }
        })
        location.reload();
    });

HTML

<div class="modal-body form-group">
                @foreach (var item in Model.PhoneBook.OrderBy(a => a.Number))
                {
                    if (Model.AvailableNumbers.Any())
                    {
                        if (Model.AvailableNumbers.Where(a => a.Number== item.Number).Count() != 0)
                        {
                            <input class="number-chkbox number" type="checkbox" checked="checked" name="@item.Number_Description" value="@item.Number">
                        }
                        else
                        {
                            <input class="number-chkbox number" type="checkbox" name="@item.Number_Description" value="@item.Number">
                        }
                        <label class="non-bold">@String.Format(" {0} - {1}", @item.Number, @item.Number_Description)</label>
                        <br />
                    }
                    else
                    {
                        <input class="number-chkbox number" type="checkbox" name="@item.Number_Description" value="@item.Number">
                        <label class="non-bold">@String.Format(" {0} - {1}", @item.Number, @item.Number_Description)</label>
                        <br />
                    }
                }
            </div>
<div class="modal-footer">
                    <button type="submit" class="btn btn-danger delete-numbers" data-dismiss="modal">Yes</button>
                    <button type="button" class="btn btn-default cancel-number">No</button>
                </div>

Answer 1

$.ajax({
  ...,
  ...,
  success: function() {location.reload();}
})

JQuery AJAX

Answer 2

我认为你应该在 ajaxComplete 事件发生时重新定位你的 location.reload() 调用。

最简单的方法是将done 或success 方法添加到您的代码中。这些方法将帮助您在 ajax 事件发生时管理回调。

使用done：

$.ajax({
  url: '/PhoneBook/AddNumber',
  data:
  ...,
  ...,
}).done(function( data ) {
     location.reload();
  });

另外，您可以添加success：

$.ajax({
  url: '/PhoneBook/AddNumber',
  data: {
  ...,
  ...,
  success: function(data, status, xhr) {
    location.reload();
  }
})

最后，更复杂的方法是使用 ajaxComplete 事件，这在您想要验证 Ajax 请求是否完成时很有用。因此，此时会执行已使用 .ajaxComplete() 方法注册的所有处理程序。

要观察此方法的实际效果，请设置一个基本的 Ajax 加载请求：

<div class="delete-numbers">Yes</div>
<div class="result"></div>
<div class="log"></div>

将事件处理程序附加到文档：

$( document ).ajaxComplete(function() {
  $( ".log" ).text( "Triggered ajaxComplete handler." );
});

现在，使用任何 jQuery 方法发出 Ajax 请求：

$( ".delete-numbers" ).click(function() {
  $( ".result" ).load( "ajax/test.html" );
});

当用户单击具有类 delete-numbers 的元素并且 Ajax 请求完成时，将显示日志消息。

所有 ajaxComplete 处理程序都会被调用，而不管 Ajax 请求已完成。如果您必须区分请求，请使用传递给处理程序的参数。每次执行 ajaxComplete 处理程序时，都会传递事件对象、XMLHttpRequest 对象和用于创建请求的设置对象。例如，您可以将回调限制为仅处理处理特定 URL 的事件：

$( document ).ajaxComplete(function( event, xhr, settings ) {
  if ( settings.url === "ajax/test.html" ) {
    $( ".log" ).text( "Triggered ajaxComplete handler. The result is " +
      xhr.responseText );
  }
});

注意：查看 xhr.responseText 即可获取返回的 Ajax 内容。

现在您可以在 Ajax 请求完成时显示一条消息。

$( document ).ajaxComplete(function( event,request, settings ) {
  $( "#msg" ).append( "<li>Request Complete.</li>" );
});

Answer 3

如果你除了reload onSuccess没有别的事可做，你可以把location.reload()放在success下面，否则你可以把它放在complete函数下面。

$.ajax({
    url: '/PhoneBook/AddNumber',
    data: {
        Number: $(this).val(),
        Name: name,
        PhoneId: PhoneId
    },
    type: "POST",
    dataType: "html",
    cache: false,
    success: function(response){
       ... do what you need here
    },
    complete: function() {
        location.reload();
    }
});

Answer 4

试试这样的：

$('.delete-numbers').click(function () {
    var total = $('.number-chkbox').length; // what to wait for
    var cnt = 0; //Nothing done yet
    $('.number-chkbox').each(function () {   
        if (this.checked) {
            $(this).attr('checked', true);
            alert($(this).val() + " " + this.checked + "I GOT INNNN ADDDDD");
            $.ajax({
                url: '/PhoneBook/AddNumber',
                data: {
                    Number: $(this).val(),
                    Name: name,
                    PhoneId: PhoneId
                },
                type: "POST",
                dataType: "html",
                //cache: false //no need POST is never cached
                success: function(data, status, xhr){
                   //all you need to do
                   cnt++; 
                   // It is safe. Javascript is single-thread so no concurrency issue may be expected
                   if(cnt == total)location.reload();
                }//success
                error: function(xhr){
                   cnt++;
                   if(cnt == total)location.reload();
                }//error
            });
        } else {
            $(this).removeAttr('checked');
            alert($(this).val() + " " + this.checked + "I GOT INNNN REMOVE");
            $.ajax({
                url: '/PhoneBook/AddNumber',
                data: {
                    Number: $(this).val(),
                    Name: name,
                    PhoneId: PhoneId
                },
                type: "POST",
                dataType: "html",
                //cache: false //see above
                success: function(data, status, xhr){
                   //all you need to do
                   cnt++;
                   if(cnt == total)location.reload();
                }//success
                error: function(xhr){
                   cnt++;
                   if(cnt == total)location.reload();
                }//error
            });
        }
    })
    //location.reload(); //never mix synch and asynch
});