JQuery получить значение атрибута внутри функции Ajax успеха

Question

У меня есть этот следующий вид:

<form class="friend_form" action="/friend" data-id="<?php echo $i;?>">  
    <input type="submit" value="no" name="hey"/> 
</form> 

и этот следующий сценарий:

$('.friend_form').on('submit', function(){ 
    $.ajax({ 
     url: $(this).attr('action'), 
     type: $(this).attr('method'), 
     success: function(html) 
     { 
      console.log('foo'+$(this).attr('data-id')); 
     } 
    }); 
    return false; 
}); 

То, что я пытаюсь сделать, это получить данные идентификатор значение атрибута, но оно возвращает значение undefined.

Что случилось с моим кодом?

Answer 1

Необходимо передать в контексте обратного вызова успеха или просто настроить переменную в методе. этот контекст внутри обратного вызова AJAX содержит контекст объекта jqxhr, а не контекст элемента.

$('.friend_form').on('submit', function(){ 
    var $this = $(this); //<-- Set up here. 
    $.ajax({ 
     url: $(this).attr('action'), 
     type: $(this).attr('method'), 
     success: function(html) 
     { 
      console.log('foo'+ $this.attr('data-id')); // access it using $this 
     } 
    }); 
    return false; 
}); 

Вы также можете использовать $ .proxy для передачи в контексте, но здесь нет необходимости, но это еще один вариант. Обратите внимание, что это изменит контекст внутри обратного вызова в целом на элемент DOM, следовательно, не будет желательным.

$.ajax({ 
     url: $(this).attr('action'), 
     type: $(this).attr('method'), 
     success: $.proxy(function(html) 
     { 
      console.log('foo'+ $(this).attr('data-id')); // Now this here is the form element. 
     }, this) 
    }); 

Answer 2

'это' внутри обратного вызова не то, что вы думаете, это:

$('.friend_form').on('submit', function(){ 
    var self = this; 
    $.ajax({ 
     url: $(this).attr('action'), 
     type: $(this).attr('method'), 
     success: function(html) 
     { 
      console.log('foo'+$(self).attr('data-id')); 
     } 
    }); 
    return false; 
}); 

Или использовать замыкание:

$('.friend_form').on('submit', function() { 
    (function (self) { 
     $.ajax({ 
      url: $(this).attr('action'), 
      type: $(this).attr('method'), 
      success: function (html) { 
       console.log('foo' + $(self).attr('data-id')); 
      } 
     }); 
    })(this); 
    return false; 
}); 

Или использовать контекст вариант Ajax:

$('.friend_form').on('submit', function(){ 
    $.ajax({ 
     url: $(this).attr('action'), 
     type: $(this).attr('method'), 
     context: this, 
     success: function(html) 
     { 
      console.log('foo'+$(this).attr('data-id')); 
     } 
    }); 
    return false; 
});