Question

我试图确保如果Ajax调用期间发生错误，则前端按钮状态不会给用户以错误的印象。

例如，可能由于没有互联网连接而导致Jquery AJax调用失败的情况。如果发生错误并且服务器上未进行任何更改，我希望按钮恢复到原始状态。

这是我自定义的常规引导按钮，使其成为切换按钮。我可以在点击时将其切换为打开/关闭。我尝试在上述按钮上模拟click，以使其在Ajax调用失败的情况下切换回原始状态。

HTML部分：

    <button type="button" id="toggle-verify-mobile"  data-toggle="button" {% if request.session.skip_verification %} class="active btn btn-lg btn-toggle" aria-pressed="true" {% else %} class="btn btn-lg btn-toggle" aria-pressed="false" {% endif %} autocomplete="off">
    <div class="handle"></div>

jQuery部分：

$(function() {
    $("#toggle-verify-mobile").on("click", function(event) {
        event.preventDefault();
        $('#toggle-verify-mobile-error').html('<br/>')
        var csrf = $('input[name="csrfmiddlewaretoken"]').val();
        current_state = $(this).hasClass('active')
    $.ajax({
        type: "POST",
        url: "{% url 'my_app:ajax_skip_mobile_verification' %}",
        data: {
            'current_state': current_state,
            'csrfmiddlewaretoken': csrf
        },
    dataType: 'json',
    success: function (data) {
        // Success stuff here
    },
    error: function(xhr, textStatus, errorThrown){
        if (current_state) { // If error occurred then set the same state as it was
            $(this).addClass("active");
            $('#toggle-verify-mobile').click();  // THIS GOES INTO LOOP
        } else {
            $(this).removeClass("active");
            $('#toggle-verify-mobile').click();   // THIS GOES INTO LOOP
        }
    }
  });
    });
});

如您所见，这将循环，因为click()将再次调用此Ajax，而它将再次调用click()

编辑

jsfiddle

Answer 1

您得到的无穷无尽的点击循环行为是正常现象，因为您是在static final int MAX_PACKAGE_NOTIFICATIONS = 50;和padding回调上附加了点击事件处理程序，是让它再次在同一{{1} }，从而在一个无限循环中调用相同的ajax请求。

因此，如果您想根据.padding(.horizontal, 20)切换按钮动画，只需在#toggle-verify-mobile条件和您的{{1}中转换error和#toggle-verify-mobile }回调，您无需触发该click事件即可切换动画，因为它最终会在您实际上面临的无尽循环中结束。

此外，如果您没有为ajax函数提供context元素，则您将无法制作切换动画，因为current_state与代表一个对象有关，该对象代表在Ajax中使用的Ajax设置调用（有关该here的更多信息），因此将addClass传递给切换按钮。

这是一个有效的示例：

removeClass

if

error

还原切换（按钮）状态而不会陷入循环

1 个答案: