如何在 $.ajax 的成功回调中传递 $(this)

Posted 2023-02-25

【中文标题】如何在 $.ajax 的成功回调中传递 $(this)

【英文标题】：How to pass $(this) in success callback of $.ajax

【发布时间】：2016-09-21 11:45:00

【问题描述】：

我见过几个不同的例子，访问 $(this) 是 ajax 的成功回调，但没有一个给出我想要的答案 - 他们都在 ajax 函数中访问 $(this)，我想传递 $(this ) 到一个单独的函数。

所以如果有 2 个文本框需要验证

$("#tb1").focusout(function()
    $.ajax(
        type:'POST',
        url: 'validURL',
        data: various_parameters,
        contentType: 'application/json; charset=utf-8',
        dataType:'json',
        success: function(data)
            validInput(data, $(this));
        ,
        error: error
    );


$("#tb2").focusout(function()
    $.ajax(
        type:'POST',
        url: 'validURL',
        data: various_parameters,
        contentType: 'application/json; charset=utf-8',
        dataType:'json',
        success: function(data)
            validInput(data, $(this));
        ,
        error: error
    );


function validInput(response, obj)
    console.log(response.d);
    console.log(obj.val());
;

当我运行代码时，我得到了 response.d 的正确值，但出现了错误：jquery-1.11.1.min.js:4 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined for obj.val()。

我做错了吗？

感谢您的帮助。 参见：Dos/Run

【参考方案1】：

$(this) 是相对于最里面的函数，在这种情况下，您需要在 ajax 查询之前将 $(this) 分配给一个变量，并在成功时使用该变量。

$("#tb1").focusout(function()
    var elem = $(this);
    $.ajax(
        type:'POST',
        url: 'validURL',
        data: various_parameters,
        contentType: 'application/json; charset=utf-8',
        dataType:'json',
        success: function(data)
            validInput(data, elem);
        ,
        error: error
    );

【讨论】：

感谢您的帮助@Hazonko - 仅在使用 ajax 时 $(this) 是“相对”的问题还是任何时候通过 $(this) 的问题？

如果你有嵌套函数 `this 将引用最里面的函数

【参考方案2】：

那是因为在 ajax 调用中丢失了 focusout 元素的上下文。

您可以在 ajax 中设置 context 选项以引用 DOM 对象，以便将 ajax 中的上下文设置为元素上下文：

$("#tb2").focusout(function()
  $.ajax(
    type:'POST',
    url: 'validURL',
    context : this,
    data: various_parameters,
    contentType: 'application/json; charset=utf-8',
    dataType:'json',
    success: function(data)
        validInput(data, $(this));
    ,
    error: error
  );
);

【参考方案3】：

实现此目的的另一种方法是首先引用它。

$("#tb2").focusout(function()
    var $this = $(this);
    $.ajax(
        type:'POST',
        url: 'validURL',
        data: various_parameters,
        contentType: 'application/json; charset=utf-8',
        dataType:'json',
        success: function(data)
            validInput(data, $this);
        ,
        error: error
    );

【参考方案4】：

成功函数中的“this”关键字是在 Ajax 调用之前存在的不同“this”，它是不同的“范围”。

为初始的“this”创建一个新变量，以便您可以在成功回调中使用它，如下所示：

$("#tb1").focusout(function()
    var $this = $(this);
    $.ajax(
        type:'POST',
        url: 'validURL',
        data: various_parameters,
        contentType: 'application/json; charset=utf-8',
        dataType:'json',
        success: function(data)
            // Here we use the $this variable, initialised before the $.ajax call.
            validInput(data, $this);
        ,
        error: error
    );