javascript - ajax 成功处理程序中的图标未更改

Question

我正在尝试在我的网络应用程序中创建一个“添加到我的列表”的功能。当用户单击图标时，此功能应在向服务器发送数据后更改图标的颜色。

它不会抛出任何错误，它成功地将数据发送到服务器，但它永远不会更改图标。 ajax 成功处理程序中的“console.log”工作正常，那么这里有什么问题呢？

提前致谢!

<div class="buttons">
  <button type="button" class="btn threeButtons" onclick="request_access(this)" id="{{ elem['isbn'].split()[0] }}">
     <i class="fas fa-plus"></i>
  </button>
</div>

function request_access($this){
    console.log("button clicked");
    var request_data = $this.id;
    var me = $(this);

    $.ajax({
        url: "/admin_add_books",
        type: "POST",
        data: request_data,
        success: function(){
            console.log("data: " + request_data)
            me.find('i').addClass('green');
            }
        })
}

Answer 1

如果您想在发送数据后立即执行某些操作，但服务器未发送响应，那么您应该执行以下操作:

var response = $.ajax({
        url: "/admin_add_books",
        type: "POST",
        data: request_data
    });
// Change color just after data is sent
me.children("i").addClass("green");

response.done(function(result){
    // Server returned result
    me.children("i").addClass("green");
});

*注意:- 在现代版本的 jquery 中，成功已被贬值。 Link