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

我认为你应该在发生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请求完成时，将显示日志消息。

无论Ajax请求是什么完成，都会调用所有ajaxComplete处理程序。如果必须区分请求，请使用传递给处理程序的参数。每次执行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 2

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

JQuery AJAX

Answer 3

如果您没有其他任何事情要做，只需重新加载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
});

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

4 个答案: