成功回调中的 JQuery Ajax 类型错误答案

【问题标题】：JQuery Ajax Type error in success callback成功回调中的 JQuery Ajax 类型错误
【发布时间】：2013-09-06 19:48:16
【问题描述】：

我创建了一个按钮，当点击在服务器中使用 Ajax 执行某些操作时，当从服务器返回时，按钮的颜色及其文本会发生变化（类似于 +1 在 facebook 中添加朋友）这是我在 .js 中的代码：

$(".blue").on("click", function(){
    var firstName = $(this).prev().prev().text();
    var lastName = $(this).prev().text();
    $(this).text("Add Friend...");
    var data={
        firstName: firstName,
        lastName: lastName
    };
    $.ajax({
        url: '/ajax/friendRequest',
        data: data,
        dataType: 'json',
        success:function(){
            alert(123);
            $(this).removeClass("glass blue");
            $(this).addClass("greenStatic");
            $(this).text("Request sent");
        }
    });
});

一切正常，请求将成功更改数据库，但是当它返回成功回调时，我只在浏览器上看到alert(123);，下面的 3 行没有运行，我的 chrome 开发人员工具抛出 @987654324 异常@ 我搜索 SO 并将 $ 符号更改为 jQuery 但我仍然有同样的问题

【问题讨论】：

标签： javascript ajax jquery

【解决方案1】：

在您的成功回调中$(this) 没有引用按钮，将其缓存在成功回调之外，例如

$(".blue").on("click", function(){
    var btn = $(this);
    ...
    ....
    success:function(){
        ...
        btn.addClass("greenStatic");
        ...
    }
});

【讨论】：

@mojibuntu 是的，$(this) 引用 jQuery 对象，再次使用 $(".blue")
@vladkras 不，可能有多个 .blue 元素。你想定位点击的那个。
是的，我就是这么回答的。
@SheikhHeera 很抱歉，我在你回答的时候正在打字和喝啤酒，所以我没有看到你正确的答案
@vladkras，没关系，亲爱的，但不要喝熊，它会刺激大脑，也会杀死细胞并造成精神依赖，希望你不介意。

【解决方案2】：

        $(this).removeClass("glass blue");
        $(this).addClass("greenStatic");
        $(this).text("Request sent");

这里this 不是指控件，而是指Ajax 请求对象。因此，将 this 替换为控件 ID。它应该工作。

类似下面的...

        $("#controlId").removeClass("glass blue");
        $("#controlId").addClass("greenStatic");
        $("#controlId").text("Request sent");

【讨论】：

#controlid 是元素的id还是别的什么？
要对其执行 addClass 和 removeClass 操作的元素。明白了吗？
是的，应该指的是按钮。如果有帮助，请采纳答案。
我有很多这样的项目，并且不想在单击时更改所有项目，那么我必须使用$(this)
@SheikhHeera 是的，完全正确。我现在刚刚检查过。