在AJAX .done函数中添加类[重复]

Question

这个问题在这里已有答案：

• How to access the correct `this` inside a callback? 10个答案

我写了一个小脚本来添加调用.done函数的类，但是这个解决方案不起作用。

$("#test").on("click", function() {

  var test = "foo bar";

  $.post({
    type: "POST",
    url: "test.php",
    data: {
      test: test
    }
  }).done(function() {
    $(this).parent().parent().addClass("success");
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><a href="#" id="test">click me</a></td>
  </tr>
</table>

Answer 1

回调内部的this不一样，它指的是ajax请求的jqXHR对象而不是事件处理程序绑定的元素，你应该先将它保存在外面，然后将它用作变量，如：

$("#test").on("click", function() {
  var _this = $(this);
  var test = "foo bar";

  $.post({
    type: "POST",
    url: "test.php",
    data: {
      test: test
    }
  }).done(function() {
    _this.parent().parent().addClass("success");
  });

});

Answer 2

这是在Ajax调用中使用this的方法。首先在该变量中存储Node并使用that变量而不是此变量。我使用GET请求，但它也适用于POST请求。

$("#test").on("click",function(){
       var that = $(this);
        var postData ={};
        $.ajax({
  	    type:"GET",
  	    url: "https://ipinfo.io/json",//your url
          data:postData,
          success: function (msg) {
                   
             },
          error:function (xhr, ajaxOptions, thrownError){
					console.log("error occured  : " +thrownError)
          	} 
       	}).done(function() {
    $(that).parent().parent().addClass("success");
  });;
})

.success{
background-color : #fc0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><a href="#" id="test">click me</a></td>
  </tr>
</table>