Ajax调用不会更新链接、html和类

Question

我有几个面板与信息和管理仪表板。因此，我重写了整个代码，使其与Ajax调用一起使用时更加异步。我有一个带有.is-ajax的几个按钮类。因此，当我单击它时，JQuery会发送对所需端点的请求。

这是HTML

<a class="button is-danger is-outlined is-fullwidth update-all is-ajax" data-endpoint="update/all" data-params="">
                    <span class="icon"><i class="fa fa-arrow-up"></i></span> <span>Actualizar todo</span>
                </a>

这是JS

$('.is-ajax').click(function () {
    $(this).addClass("is-loading");
    $.get("ajax/" + $(this).data("endpoint") + "?params=" + $(this).data("params"), function (data) {
        $(this).removeClass("is-loading");
        $(this).html(data);
    });
});

为什么响应不是修改而是按钮？

Answer 1

首先确认服务器返回了您期望的html。在你的成功回调中，尝试console.log(data)看看。

然后将要修改的元素分配给一个可以引用的变量，而不是使用this。

$('.is-ajax').click(function () {
    var elem = $(this);
    elem.addClass("is-loading");
    $.get("ajax/" + $(this).data("endpoint") + "?params=" + elem.data("params"), function (data) {
        elem.removeClass("is-loading");
        elem.html(data);
    });
});

Answer 2

嗯，当然！很抱歉给你这个菜鸟。这就是解决方案吗？

$('.is-ajax').click(function () {
    var btn = $(this);
    btn.toggleClass("is-loading");
    $.get("ajax/" + $(this).data("endpoint") + "?params=" + $(this).data("params"), function (data) {
        btn.toggleClass("is-loading");
        btn.html(data);
    });
});