AJAX 成功中的 $(this) 不起作用

Posted 2023-05-07

【中文标题】AJAX 成功中的 $(this) 不起作用

【英文标题】：$(this) inside of AJAX success not working

【发布时间】：2011-09-17 16:45:49

【问题描述】：

我正在尝试更改一些使用 onclick 的旧代码，以便使用 $(this)。问题是 $(this) 在成功时不起作用。无论如何都可以在不将其设置为 var 的情况下执行此操作。

$('.addToCart').click(function() 

    $.ajax(
        url: 'cart/update',
        type: 'post',
        data: 'product_id=' + $(this).attr("data-id"),
        dataType: 'json',
        success: function(json) 

            if (json['success']) 

            $(this).addClass("test");

               
        
    );

);

【参考方案1】：

问题

在回调内部，this 指的是 Ajax 调用的 jqXHR 对象，而不是事件处理程序绑定到的元素。 Learn more about how this works in javascript.

---

解决方案

如果您可以使用 ES2015+，那么使用 箭头函数 可能是最简单的选择：

$.ajax(
    //...
    success: (json) => 
         // `this` refers to whatever `this` refers to outside the function
    
);

您可以设置context option:

这个对象将成为所有 Ajax 相关回调的上下文。默认情况下，上下文是一个对象，表示调用中使用的 ajax 设置（$.ajaxSettings 与传递给$.ajax 的设置合并）。 (...)

$.ajax(
    //...
    context: this,
    success: function(json) 
         // `this` refers to the value of `context`
    
);

或使用$.proxy:

$.ajax(
    //...
    success: $.proxy(function(json) 
         // `this` refers to the second argument of `$.proxy`
    , this)
);

或在回调之外保留对this 值的引用：

var element = this;

$.ajax(
    //...
    success: function(json) 
         // `this` refers to the jQXHR object
         // use `element` to refer to the DOM element
         // or `$(element)` to refer to the jQuery object
    
);

---

相关

How to access the correct `this` inside a callback?

【讨论】：

随着我越来越擅长使用 JavaScript 并构建越来越大的复杂项目，我终于有点想通了，但是看到这个答案有助于我知道我的假设是正确的，而不仅仅是理论所以我个人感谢你，即使反对 SO 评论政策！ =)

我同意（并感谢），这三个选项都有效。我不知道 ajax 上下文选项。一个小缺点是我的 IDE (phpstorm) 无法识别该选项解决了它在诸如此类的 JS 闭包中有用地检测到的范围问题。添加代理包装器确实会使警告消失，因此 context:this 在其可能庞大的启发式列表中一定是一个未知的技巧。

上下文选项同上。完美运行。

优秀的例子！

【参考方案2】：

jQuery(".custom-filter-options .sbHolder ul li a").each(function () 
    var myStr = jQuery(this).text();
    var myArr = myStr.split(" (");
     url = 'your url'; // New Code
            data = myArr[0];
                try 
                    jQuery.ajax(
                        url : url,
                        context: this,
                        type : 'post',
                        data : data,
                        success : function(data) 
            if(data)
                  jQuery(this).html(data);
            else
                  jQuery(this).html(myArr[0]);
            
                        
                    );
                 catch (e) 
                 


);